@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
50 lines • 12.5 kB
JavaScript
"use strict";
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 BlokButton_1 = require("../BlokButton/BlokButton");
const BlokIcon_1 = require("../BlokIcon/BlokIcon");
const BlokIconButton_1 = require("../BlokIconButton/BlokIconButton");
const BlokTooltip_1 = require("../BlokTooltip/BlokTooltip");
const BlokButtonGroup_1 = require("./BlokButtonGroup");
const classes = {
horizontalWrapper: (0, css_1.css)({
display: "flex",
gap: "32px",
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/BlokButtonGroup",
component: BlokButtonGroup_1.BlokButtonGroup,
tags: ["autodocs"],
argTypes: {},
args: {},
};
exports.default = meta;
exports.AllButtons = {
parameters: {
viewMode: "story",
controls: { disable: true, expanded: false },
options: { showPanel: false },
},
render: () => ((0, jsx_runtime_1.jsx)("div", { className: classes.verticalWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.verticalWrapper, classes.separator), children: [(0, jsx_runtime_1.jsx)("h2", { children: "Normal" }), (0, jsx_runtime_1.jsxs)("div", { className: classes.horizontalWrapper, children: [(0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { children: [(0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "Grid view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "Grid view", variant: "toggle", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-outline" }) }) }), (0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "List view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "List view", variant: "toggle", isActive: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-module-outline" }) }) }), (0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "Board view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "third", variant: "toggle", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-large-outline" }) }) })] }), (0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { children: [(0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "Grid view", children: "Grid view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "List view", isActive: true, children: "List view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "third", children: "Board view" })] }), (0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { children: [(0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "Grid view", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-outline" }), children: "Grid view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "List view", isActive: true, startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-module-outline" }), children: "List view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "third", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-large-outline" }), children: "Board view" })] })] }), (0, jsx_runtime_1.jsx)("h2", { children: "Rounded" }), (0, jsx_runtime_1.jsxs)("div", { className: classes.horizontalWrapper, children: [(0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { variant: "rounded", children: [(0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "Grid view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "Grid view", variant: "toggle", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-outline" }) }) }), (0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "List view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "List view", variant: "toggle", isActive: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-module-outline" }) }) }), (0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "Board view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "third", variant: "toggle", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-large-outline" }) }) })] }), (0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { variant: "rounded", children: [(0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "Grid view", size: "small", children: "Grid view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "List view", isActive: true, size: "small", children: "List view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "third", size: "small", children: "Board view" })] }), (0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { variant: "rounded", children: [(0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "Grid view", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-outline" }), size: "small", children: "Grid view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "List view", isActive: true, startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-module-outline" }), size: "small", children: "List view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "third", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-large-outline" }), size: "small", children: "Board view" })] })] }), (0, jsx_runtime_1.jsx)("h2", { children: "Square" }), (0, jsx_runtime_1.jsxs)("div", { className: classes.horizontalWrapper, children: [(0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { variant: "square", children: [(0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "Grid view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "Grid view", variant: "toggle", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-outline" }) }) }), (0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "List view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "List view", variant: "toggle", isActive: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-module-outline" }) }) }), (0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "Board view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "third", variant: "toggle", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-large-outline" }) }) })] }), (0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { variant: "square", children: [(0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "Grid view", size: "small", children: "Grid view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "List view", isActive: true, size: "small", children: "List view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "third", size: "small", children: "Board view" })] }), (0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { variant: "square", children: [(0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "Grid view", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-outline" }), size: "small", children: "Grid view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "List view", isActive: true, startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-module-outline" }), size: "small", children: "List view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "third", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-large-outline" }), size: "small", children: "Board view" })] })] }), (0, jsx_runtime_1.jsx)("h2", { children: "Vertical" }), (0, jsx_runtime_1.jsxs)("div", { className: classes.horizontalWrapper, children: [(0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { variant: "square", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "Grid view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "Grid view", variant: "toggle", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-outline" }) }) }), (0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "List view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "List view", variant: "toggle", isActive: true, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-module-outline" }) }) }), (0, jsx_runtime_1.jsx)(BlokTooltip_1.BlokTooltip, { title: "Board view", children: (0, jsx_runtime_1.jsx)(BlokIconButton_1.BlokIconButton, { id: "third", variant: "toggle", children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-large-outline" }) }) })] }), (0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { variant: "square", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "Grid view", size: "small", children: "Grid view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "List view", isActive: true, size: "small", children: "List view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "third", size: "small", children: "Board view" })] }), (0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { variant: "square", orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "Grid view", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-outline" }), size: "small", children: "Grid view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "List view", isActive: true, startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-module-outline" }), size: "small", children: "List view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "third", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-large-outline" }), size: "small", children: "Board view" })] })] }), (0, jsx_runtime_1.jsx)("h2", { children: "Full width vertical" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(BlokButtonGroup_1.BlokButtonGroup, { variant: "square", orientation: "vertical", fullWidth: true, children: [(0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "navigation", id: "Grid view", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-outline" }), children: "Grid view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "navigation", id: "List view", isActive: true, startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-module-outline" }), children: "List view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "navigation", id: "third", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-large-outline" }), children: "Board view" })] }) })] }) })),
};
exports.PlayGround = {
args: {
variant: "normal",
children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "Grid view", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-outline" }), size: "small", children: "Grid view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "List view", isActive: true, startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-module-outline" }), size: "small", children: "List view" }), (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { variant: "toggle", id: "third", startIcon: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "view-list-large-outline" }), size: "small", children: "Board view" })] })),
},
};
//# sourceMappingURL=BlokButtonGroup.stories.js.map