@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
38 lines • 3.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PlayGround = exports.BlokImageExamples = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const CoreComponents_1 = require("../../Components/CoreComponents");
const BlokImage_1 = require("./BlokImage");
const classes = {
flexWrapper: (0, css_1.css)({
display: "flex",
flexDirection: "column",
gap: 8,
marginBottom: 24,
width: "500px",
}),
};
const meta = {
title: "Components/Media and icons/BlokImage",
component: BlokImage_1.BlokImage,
tags: ["autodocs"],
argTypes: {},
args: {},
};
exports.default = meta;
exports.BlokImageExamples = {
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)(CoreComponents_1.Typography, { children: "Basic usage" }), (0, jsx_runtime_1.jsx)(BlokImage_1.BlokImage, { src: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/logo-content_hub", alt: "ContentHub Logo" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With custom dimensions (cover)" }), (0, jsx_runtime_1.jsx)(BlokImage_1.BlokImage, { src: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/logo-content_hub", alt: "Placeholder Image", width: "150px", height: "150px" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With custom dimensions (contain)" }), (0, jsx_runtime_1.jsx)(BlokImage_1.BlokImage, { src: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/logo-content_hub", alt: "Wide Placeholder Image", fit: "contain", width: "150px", height: "150px" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With additional class name" }), (0, jsx_runtime_1.jsx)(BlokImage_1.BlokImage, { src: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/logo-content_hub", alt: "Styled Placeholder Image", className: "custom-class" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With error icon when image cannot be shown" }), (0, jsx_runtime_1.jsx)(BlokImage_1.BlokImage, { src: "invalid-url.jpg", alt: "Broken Image" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With onClick handler" }), (0, jsx_runtime_1.jsx)(BlokImage_1.BlokImage, { src: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/logo-content_hub", alt: "Wide Placeholder Image", onClick: () => alert("clicked") })] })] })),
};
exports.PlayGround = {
parameters: {
viewMode: "docs",
},
};
//# sourceMappingURL=BlokImage.stories.js.map