@sitecore/sc-contenthub-blok/dist/GeneralInfo.stories.js

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

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GeneralInfo = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const CoreComponents_1 = require("./Components/CoreComponents");
const SourceCode_1 = __importDefault(require("./SourceCode"));
const meta = {
    argTypes: {},
    args: {},
};
exports.default = meta;
exports.GeneralInfo = {
    parameters: {
        docs: {
            source: { language: "tsx" },
        },
        viewMode: "story",
        controls: { disable: true, expanded: false },
        options: { showPanel: false },
    },
    render: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "What is the function of this library" }), (0, jsx_runtime_1.jsxs)("p", { children: ["This library provides a collection of components and utilities designed for use in Content Hub. It aims to replicate the design language of the", " ", (0, jsx_runtime_1.jsx)("a", { href: "https://blok.sitecore.com/", target: "_blank", children: "Blok" }), " ", "library, which is utilized in other Sitecore products."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["The Blok library used in other Sitecore products is built on Chakra UI, whereas this library is built on", " ", (0, jsx_runtime_1.jsx)("a", { href: "https://mui.com/material-ui/", target: "_blank", children: "Material UI" }), ". This ensures a consistent design language while leveraging the robust features of Material UI."] }), (0, jsx_runtime_1.jsx)("p", { children: "By using this library, developers can create interfaces that align with the Blok design principles, ensuring a cohesive user experience across different Sitecore platforms." }), (0, jsx_runtime_1.jsx)("p", { children: "New components will be added gradually to this library as it is still a work in progress." }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "Installation" }), (0, jsx_runtime_1.jsx)("p", { children: "To install the Blok library, run the following command:" }), (0, jsx_runtime_1.jsx)(SourceCode_1.default, { language: "bash", code: "npm install @sitecore/sc-contenthub-blok" }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "Importing Components" }), (0, jsx_runtime_1.jsx)("p", { children: "To use a component from the Blok library, import it as follows:" }), (0, jsx_runtime_1.jsx)(SourceCode_1.default, { language: "typescript", code: 'import { BlokButton } from "@sitecore/sc-contenthub-blok";' }), (0, jsx_runtime_1.jsx)("p", { children: "Blok exports all the Material UI components, so you can directly import them from the library:" }), (0, jsx_runtime_1.jsx)(SourceCode_1.default, { language: "typescript", code: 'import { Typography } from "@sitecore/sc-contenthub-blok";' }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "Theming" }), (0, jsx_runtime_1.jsx)("p", { children: "The library exports two MUI themes that can be used:" }), (0, jsx_runtime_1.jsx)(SourceCode_1.default, { code: 'import { BlokThemeDark, BlokThemeLight } from "@sitecore/sc-contenthub-blok";' }), (0, jsx_runtime_1.jsx)(SourceCode_1.default, { code: "<ThemeProvider theme={BlokThemeLight}>...</ThemeProvider>" }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "Foundation variables, colors, and semantic tokens" }), (0, jsx_runtime_1.jsx)("p", { children: "To use foundation variables, colors, and semantic tokens, import them as follows:" }), (0, jsx_runtime_1.jsx)(SourceCode_1.default, { language: "typescript", code: 'import { colors, semanticTokens, foundationVariables } from "@sitecore/sc-contenthub-blok";' }), (0, jsx_runtime_1.jsx)("p", { children: "Example usage:" }), (0, jsx_runtime_1.jsx)(SourceCode_1.default, { language: "typescript", code: `
            const primaryColor = themePrimary[500]; const textColor = semanticTokens.subtleText.default;
        ` }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "Icons" }), (0, jsx_runtime_1.jsxs)("p", { children: ["All icons can be found in the", " ", (0, jsx_runtime_1.jsx)("a", { href: "https://github.com/Sitecore-PD/sitecore.contenthub.icons/tree/master/dist/icons", target: "_blank", children: "Sitecore Content Hub Icons" }), " ", "repository."] }), (0, jsx_runtime_1.jsxs)("p", { children: ["A visual overview of the icons can be found", " ", (0, jsx_runtime_1.jsx)("a", { href: "https://ch-webapp.sitecorecontenthub.cloud/css/m-icons-demo/demo", target: "_blank", children: "here" }), "."] }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "h2", children: "Adding components." }), (0, jsx_runtime_1.jsxs)("p", { children: ["If you want to participate and add a new component to the library, please find more info", " ", (0, jsx_runtime_1.jsx)("a", { href: "https://sitecore.atlassian.net/wiki/spaces/CHCAFE/pages/5667454991/Content+Hub+Blok+library", target: "_blank", children: "here" })] })] })),
};
//# sourceMappingURL=GeneralInfo.stories.js.map