@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
50 lines • 6.14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AlertPlayground = exports.AllAlerts = 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 CoreComponents_1 = require("../CoreComponents");
const BlokAlert_1 = require("./BlokAlert");
const classes = {
horizontalWrapper: (0, css_1.css)({ display: "flex", gap: "8px", alignItems: "center" }),
verticalWrapper: (0, css_1.css)({
display: "flex",
flexDirection: "column",
gap: "15px",
}),
separator: (0, css_1.css)({
borderBottom: `1px solid ${Foundations_1.semanticTokens.borderColor.default}`,
paddingBottom: "30px",
}),
};
const meta = {
title: "Components/Feedback/BlokAlert",
component: BlokAlert_1.BlokAlert,
tags: ["autodocs"],
argTypes: {},
args: {},
};
exports.default = meta;
exports.AllAlerts = {
parameters: {
viewMode: "story",
controls: { disable: true, expanded: false },
options: { showPanel: false },
layout: "padded",
},
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)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", children: "Some info information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "warning", children: "Some warning information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "error", children: "Some error information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "success", children: "Some success information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "neutral", children: "Some neutral information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "ai", children: "Some AI information displayed here" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "success", iconName: "tag-auto-outline", children: "Using a custom icon" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), children: "Alert with Close Button" }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), children: (0, jsx_runtime_1.jsxs)(CoreComponents_1.Grid, { container: true, direction: "row", gap: 2, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: "Alert with link button and Close Button" }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "test", variant: "link", colorScheme: "info", children: "Some Button" }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), alertTitle: "Alert with Title, long message, and Button", children: (0, jsx_runtime_1.jsxs)(CoreComponents_1.Grid, { container: true, direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis." }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: (0, jsx_runtime_1.jsx)(BlokButton_1.BlokButton, { id: "test", variant: "outline", colorScheme: "info", children: "Button" }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), alertTitle: "Alert with Title, collapsible", isCollapsible: true, children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, porttitor mauris sit amet orci. Aenean dignissim pellentesque felis." }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.horizontalWrapper, children: (0, jsx_runtime_1.jsx)(BlokAlert_1.BlokAlert, { severity: "info", dismissible: true, onClose: () => alert("Closing"), alertTitle: "Alert with Title, collapsed", isCollapsible: true, isCollapsed: true, children: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, porttitor mauris sit amet orci. Aenean dignissim pellentesque felis." }) })] }) })),
};
exports.AlertPlayground = {
args: {
severity: "info",
children: "Some information displayed here",
alertTitle: "Some title content",
isCollapsed: false,
isCollapsible: false,
dismissible: true,
onClose: () => alert("Closing"),
},
};
//# sourceMappingURL=BlokAlert.stories.js.map