@sitecore/sc-contenthub-blok/dist/Components/BlokSelect/BlokSelect.stories.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlokSelectExamples = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const CoreComponents_1 = require("../../Components/CoreComponents");
const BlokSelect_1 = require("./BlokSelect");
const classes = {
    flexWrapper: (0, css_1.css)({
        display: "flex",
        flexDirection: "column",
        gap: 8,
        marginBottom: 24,
    }),
};
const meta = {
    title: "Components/Form/BlokSelect",
    component: BlokSelect_1.BlokSelect,
    tags: ["autodocs"],
    argTypes: {},
    args: {},
};
exports.default = meta;
const options = [
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    { label: "Option 3", value: "3" },
];
const manyOptions = [
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    { label: "Option 3", value: "3" },
    { label: "Option 4", value: "4" },
    { label: "Option 5", value: "5" },
    { label: "Option 6", value: "6" },
    { label: "Option 7", value: "7" },
    { label: "Option 8", value: "8" },
];
const optionsWithIcons = [
    {
        icon: "m-icon m-icon-view-sequential-outline",
        id: 0,
        label: "No grouping",
    },
    {
        id: 121,
        label: "Content type",
        icon: "m-icon m-icon-view-sequential-outline",
    },
];
const optionsWithLongText = [
    {
        id: 0,
        label: "No grouping No grouping No grouping No grouping No grouping No grouping No grouping No grouping",
    },
    {
        id: 121,
        label: "Content type Content type Content type Content type Content type Content type Content type",
    },
];
exports.BlokSelectExamples = {
    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: "Disabled item" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokSelect_1.BlokSelect, { id: "example1", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", searchBoxMinAmountOfItems: 5, itemsToDisable: [options[1]], value: options[0], searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "None value selectable" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokSelect_1.BlokSelect, { id: "example2", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", emptyValueSelectable: true, searchBoxMinAmountOfItems: 5, noneLabel: "None", value: options[0], searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "In a grid" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(CoreComponents_1.Grid, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: (0, jsx_runtime_1.jsx)(BlokSelect_1.BlokSelect, { id: "example2", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", emptyValueSelectable: true, searchBoxMinAmountOfItems: 5, noneLabel: "None", value: options[0], searchMessage: "Search", clearMessage: "Clear" }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: (0, jsx_runtime_1.jsx)(BlokSelect_1.BlokSelect, { id: "example2", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", emptyValueSelectable: true, searchBoxMinAmountOfItems: 5, noneLabel: "None", value: options[0], searchMessage: "Search", clearMessage: "Clear" }) })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "No value selected" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokSelect_1.BlokSelect, { id: "example3", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, placeholder: "Select an option", emptyValueSelectable: true, searchBoxMinAmountOfItems: 5, noneLabel: "None", searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Search box" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokSelect_1.BlokSelect, { id: "example4", options: manyOptions, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", maxHeight: 300, searchMessage: "Search", clearMessage: "Clear", tooltip: "Some tooltip" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Full width" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokSelect_1.BlokSelect, { id: "example5", options: options, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.value, returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, isFullWidth: true, accessibilityId: "example2", maxHeight: 300, searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With icons on the items" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokSelect_1.BlokSelect, { id: "example6", options: optionsWithIcons, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.id.toString(), returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", maxHeight: 300, isFullWidth: true, value: optionsWithIcons[0], showIconAndText: true, searchMessage: "Search", clearMessage: "Clear" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With long text values" }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(BlokSelect_1.BlokSelect, { id: "example6", options: optionsWithLongText, onChange: (selected) => console.log("Selected:", selected), labelMapper: (item) => item.label, valueMapper: (item) => item.id.toString(), returnValue: (item) => item, placeholder: "Select an option", searchBoxMinAmountOfItems: 3, accessibilityId: "example2", maxHeight: 300, isFullWidth: true, value: optionsWithLongText[0], searchMessage: "Search", clearMessage: "Clear" }) })] })] })),
};
//# sourceMappingURL=BlokSelect.stories.js.map