@sitecore/sc-contenthub-blok/dist/Foundations/shadows.stories.js

A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Shadows = 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 classes = {
    example: (0, css_1.css)({
        width: "8rem",
        backgroundColor: "white",
        display: "inline-flex",
        height: 64,
        borderRadius: Foundations_1.borderRadiusMd,
    }),
    code: (0, css_1.css)({
        backgroundColor: "rgba(0, 0, 0, 0.05)",
        padding: "0.1rem 0.3rem",
        borderRadius: "0.2rem",
        cursor: "pointer",
    }),
    tableWrapper: (0, css_1.css)({ backgroundColor: Foundations_1.neutral[50], padding: "8px" }),
};
const meta = {
    title: "Foundations/Shadows",
    argTypes: {},
    args: {},
    parameters: {
        layout: "padded",
        controls: { disable: true, expanded: false },
    },
};
exports.default = meta;
exports.Shadows = {
    render: () => ((0, jsx_runtime_1.jsxs)("div", { className: classes.tableWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_2.Typography, { variant: "h2", children: "Shadows" }), (0, jsx_runtime_1.jsxs)(CoreComponents_1.Table, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(CoreComponents_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: "Example" }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: "Variable" }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: "Value" })] }) }), (0, jsx_runtime_1.jsxs)(CoreComponents_1.TableBody, { children: [(0, jsx_runtime_1.jsxs)(CoreComponents_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { boxShadow: Foundations_1.shadowXs } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.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)("shadowXs"), children: "shadowXs" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.shadowXs }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { boxShadow: Foundations_1.shadowSm } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.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)("shadowSm"), children: "shadowSm" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.shadowSm }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { boxShadow: Foundations_1.shadowBase } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.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)("shadowBase"), children: "shadowBase" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.shadowBase }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { boxShadow: Foundations_1.shadowMd } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.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)("shadowMd"), children: "shadowMd" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.shadowMd }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { boxShadow: Foundations_1.shadowLg } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.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)("shadowLg"), children: "shadowLg" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.shadowLg }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { boxShadow: Foundations_1.shadowXl } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.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)("shadowXl"), children: "shadowXl" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.shadowXl }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { boxShadow: Foundations_1.shadow2Xl } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.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)("shadow2Xl"), children: "shadow2Xl" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.shadow2Xl }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { boxShadow: Foundations_1.shadowOutline } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.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)("shadowOutline"), children: "shadowOutline" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.shadowOutline }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { boxShadow: Foundations_1.shadowInner } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.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)("shadowInner"), children: "shadowInner" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.shadowInner }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("div", { className: classes.example, style: { boxShadow: Foundations_1.shadowDarkLg } }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.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)("shadowDarkLg"), children: "shadowDarkLg" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.shadowDarkLg }) })] })] })] })] })),
};
//# sourceMappingURL=shadows.stories.js.map