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

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Typography_ = 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/Typography",
    argTypes: {},
    args: {},
    parameters: {
        layout: "padded",
        controls: { disable: true, expanded: false },
    },
};
exports.default = meta;
exports.Typography_ = {
    render: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "Fonts" }), (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: "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)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)(`fontFamilyBase`), children: "fontFamilyBase" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.fontFamilyBase }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(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)(`fontFamilyMono`), children: "fontFamilyMono" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.fontFamilyMono }) })] })] })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "Font weights" }), (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: "Variable" }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: "Value" }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: "Example" })] }) }), (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)(Components_1.BlokTooltip, { title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("code", { className: classes.code, onClick: () => (0, utils_1.copyToClipboard)(`fontWeightNormal`), children: "fontWeightNormal" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.fontWeightNormal }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: Foundations_1.fontWeightNormal }, children: "Normal text" }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(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)(`fontWeightMedium`), children: "fontWeightMedium" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.fontWeightMedium }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: Foundations_1.fontWeightMedium }, children: "Medium text" }) })] }), (0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(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)(`fontWeightBold`), children: "fontWeightBold" }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.fontWeightBold }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: Foundations_1.fontWeightBold }, children: "Medium bold" }) })] })] })] }), (0, jsx_runtime_1.jsx)("br", {}), " ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "Font sizes" }), (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: "Variable" }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: "Value" }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: "Example" })] }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableBody, { children: Object.keys(Foundations_1.fontSizes).map((key) => ((0, jsx_runtime_1.jsxs)(CoreComponents_2.TableRow, { children: [(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)(`fontSizes.${key}`), children: key }) }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsx)("code", { children: Foundations_1.fontSizes[key] }) }), (0, jsx_runtime_1.jsx)(CoreComponents_2.TableCell, { children: (0, jsx_runtime_1.jsxs)("span", { style: { fontSize: Foundations_1.fontSizes[key] }, children: ["Text size ", key] }) })] }))) })] })] })),
};
//# sourceMappingURL=typography.stories.js.map