@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
39 lines • 8.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BorderRadius = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const Components_1 = require("../Components");
const CoreComponents_1 = require("../Components/CoreComponents");
const CoreComponents_2 = require("../Components/CoreComponents");
const Foundations_1 = require("../Foundations");
const utils_1 = require("../Foundations/utils");
const colors_1 = require("./colors");
const classes = {
example: (0, css_1.css)({
width: "8rem",
backgroundColor: colors_1.pink[200],
display: "inline-flex",
height: 64,
}),
code: (0, css_1.css)({
backgroundColor: "rgba(0, 0, 0, 0.05)",
padding: "0.1rem 0.3rem",
borderRadius: "0.2rem",
cursor: "pointer",
}),
};
const meta = {
title: "Foundations/BorderRadius",
argTypes: {},
args: {},
parameters: {
layout: "padded",
controls: { disable: true, expanded: false },
},
};
exports.default = meta;
exports.BorderRadius = {
render: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "Border radius" }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.Table, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableHead, { children: (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: "Example" }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: "Variable" }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: "Value" })] }) }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableBody, { children: [(0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { borderRadius: Foundations_1.borderRadiusNone } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)("borderRadiusNone"), children: "borderRadiusNone" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.borderRadiusNone }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { borderRadius: Foundations_1.borderRadiusSm } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)("borderRadiusSm"), children: "borderRadiusSm" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.borderRadiusSm }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { borderRadius: Foundations_1.borderRadiusBase } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)("borderRadiusBase"), children: "borderRadiusBase" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.borderRadiusBase }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { borderRadius: Foundations_1.borderRadiusMd } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)("borderRadiusMd"), children: "borderRadiusMd" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.borderRadiusMd }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { borderRadius: Foundations_1.borderRadiusLg } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)("borderRadiusLg"), children: "borderRadiusLg" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.borderRadiusLg }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { borderRadius: Foundations_1.borderRadiusXl } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)("borderRadiusXl"), children: "borderRadiusXl" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.borderRadiusXl }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { borderRadius: Foundations_1.borderRadius2xl } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)("borderRadius2xl"), children: "borderRadius2xl" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.borderRadius2xl }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { borderRadius: Foundations_1.borderRadius3xl } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)("borderRadius3xl"), children: "borderRadius3xl" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.borderRadius3xl }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { borderRadius: Foundations_1.borderRadiusFull } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)("borderRadiusFull"), children: "borderRadiusFull" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.borderRadiusFull }) })] })] })] })] })),
};
//# sourceMappingURL=borderRadius.stories.js.map