@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
36 lines • 9.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PlayGround = exports.LabeledIcons = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const BlokLabeledIcon_1 = require("./BlokLabeledIcon");
const classes = {
flexWrapper: (0, css_1.css)({
display: "flex",
gap: 8,
marginBottom: 24,
}),
};
const meta = {
title: "Components/Data display/BlokLabeledIcon",
component: BlokLabeledIcon_1.BlokLabeledIcon,
tags: ["autodocs"],
argTypes: {},
args: {},
};
exports.default = meta;
exports.LabeledIcons = {
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)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "danger", children: "Danger" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "warning", children: "Warning" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "success", children: "Success" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "info", children: "Info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather", children: "Primary" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather", colorTarget: "background" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather", colorTarget: "background", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather", colorTarget: "background", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather", colorTarget: "background", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather", colorTarget: "background", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather", colorTarget: "background", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather", colorTarget: "background", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather", colorTarget: "background", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather", colorTarget: "background", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather", colorTarget: "background", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather", colorTarget: "background", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather", colorTarget: "background", children: "Primary" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather", colorTarget: "background", isRound: true }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather", colorTarget: "background", isRound: true }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather", isRound: true }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather", colorTarget: "background", isRound: true }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather", colorTarget: "background", isRound: true }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather", colorTarget: "background", isRound: true }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather", colorTarget: "background", isRound: true }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather", colorTarget: "background", isRound: true }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather", colorTarget: "background", isRound: true }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather", colorTarget: "background", isRound: true }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather", colorTarget: "background", isRound: true })] })] })),
};
exports.PlayGround = {
args: {
children: "Some label",
iconName: "feather",
},
};
//# sourceMappingURL=BlokLabeledIcon.stories.js.map