@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
38 lines • 5.44 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PlayGround = exports.Badges = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const BlokBadge_1 = require("./BlokBadge");
const classes = {
flexWrapper: (0, css_1.css)({
display: "flex",
gap: 8,
marginBottom: 24,
}),
};
const meta = {
title: "Components/Data display/BlokBadge",
component: BlokBadge_1.BlokBadge,
tags: ["autodocs"],
argTypes: {},
args: {},
};
exports.default = meta;
exports.Badges = {
parameters: {
viewMode: "story",
controls: { disable: true, expanded: false },
options: { showPanel: false },
},
render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "danger", children: "danger" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "warning", children: "warning" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "success", children: "success" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "info", children: "info" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "info", count: 3, children: "info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Neutral" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "orange", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "yellow", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "green", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "teal", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "blue", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "cyan", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "purple", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "pink", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "primary", "data-testid": "primary", children: "Primary" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "ai", "data-testid": "ai", children: "AI" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { expandedContent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "some / large / path" }), children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", count: 3, children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", colorScheme: "pink" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", colorScheme: "pink", count: 3 })] }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { children: "Some long text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { allowMultiline: true, children: "With allow multiline Some long text here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { allowMultiline: true, expandedContent: "Long expanded text. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis\n nostrud exercitation ullamco laboris nis", children: "Normal collapsed text" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.flexWrapper, children: (0, jsx_runtime_1.jsx)("div", { style: { maxWidth: "55vw" }, children: (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { slots: {
start: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Some start content" }),
end: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Some end content" }),
}, children: "Normal collapsed text" }) }) })] })),
};
exports.PlayGround = {
args: {
children: "Tag md",
},
};
//# sourceMappingURL=BlokBadge.stories.js.map