@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
52 lines • 11.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PlayGround = exports.BlokSearchBoxExamples = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const BlokButtonSelect_1 = require("../../Components/BlokButtonSelect/BlokButtonSelect");
const BlokButtonSelect_stories_1 = require("../../Components/BlokButtonSelect/BlokButtonSelect.stories");
const CoreComponents_1 = require("../../Components/CoreComponents");
const BlokSearchBox_1 = require("./BlokSearchBox");
const classes = {
flexWrapper: (0, css_1.css)({
display: "flex",
flexDirection: "column",
gap: 8,
marginBottom: 24,
width: "800px",
}),
};
const meta = {
title: "Components/Search/BlokSearchBox",
component: BlokSearchBox_1.BlokSearchBox,
tags: ["autodocs"],
argTypes: {},
args: {},
};
exports.default = meta;
exports.BlokSearchBoxExamples = {
parameters: {
viewMode: "story",
controls: { disable: true, expanded: false },
options: { showPanel: false },
},
render: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Basic usage" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: (value) => console.log("Search:", value), value: "", searchMessage: "Search", clearMessage: "Clear", onEnterPress: () => console.log("Enter pressed") })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With custom placeholder" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: (value) => console.log("Search:", value), value: "", placeholder: "Search here...", searchMessage: "Search", clearMessage: "Clear" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With initial value" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: (value) => console.log("Search:", value), value: "Initial value", searchMessage: "Search", clearMessage: "Clear" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With max characters" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: (value) => console.log("Search:", value), value: "", maxNumberOfCharacters: 10, searchMessage: "Search", clearMessage: "Clear" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With max characters and ignoreLimitationsRegex (id=)" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: (value) => console.log("Search:", value), value: "", maxNumberOfCharacters: 10, searchMessage: "Search", clearMessage: "Clear", ignoreLimitationsRegex: /\bid=([^&]+)/i })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "With max words" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: (value) => console.log("Search:", value), value: "", maxNumberOfWords: 3, searchMessage: "Search", clearMessage: "Clear" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Disabled" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "", isDisabled: true, searchMessage: "Search", clearMessage: "Clear" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "No limited width" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "", searchMessage: "Search", clearMessage: "Clear", hasLimitedWidth: false })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Disallow multiline on focus" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip", allowMultipleLines: false, searchMessage: "Search", clearMessage: "Clear" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Allow multiline on focus" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip", allowMultipleLines: true, searchMessage: "Search", clearMessage: "Clear" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Allow multiline without overlap" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip", allowMultipleLines: true, searchMessage: "Search", clearMessage: "Clear", expandOverContent: false, hasLimitedWidth: false })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Custom search icon" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip", searchMessage: "Search", clearMessage: "Clear", searchIcon: "star-four-points" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Custom search icon image" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip", searchMessage: "Search", clearMessage: "Clear", searchIconImage: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/spot-magnify-ai" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Slot 1 filled in" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip", allowMultipleLines: true, searchMessage: "Search", clearMessage: "Clear", slots: {
slot1: ((0, jsx_runtime_1.jsx)(BlokButtonSelect_1.BlokButtonSelect, { id: "example6", options: BlokButtonSelect_stories_1.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, value: BlokButtonSelect_stories_1.optionsWithIcons[0], showIconAndText: false, searchMessage: "Search", clearMessage: "Clear", size: "small" })),
} })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Slot 2 filled in" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip", allowMultipleLines: true, searchMessage: "Search", clearMessage: "Clear", expandOverContent: false, hasLimitedWidth: false, slots: {
slot2: ((0, jsx_runtime_1.jsx)(CoreComponents_1.Box, { p: 2, children: (0, jsx_runtime_1.jsxs)(CoreComponents_1.Grid, { container: true, spacing: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: (0, jsx_runtime_1.jsx)(CoreComponents_1.CircularProgress, { color: "primary", size: 14 }) }), (0, jsx_runtime_1.jsx)(CoreComponents_1.Grid, { children: (0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { variant: "body2", children: "Analyzing your metadata, taxonomy, filters...." }) })] }) })),
} })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "AI styles" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "", allowMultipleLines: true, searchMessage: "Search", clearMessage: "Clear", expandOverContent: false, hasLimitedWidth: false, applyAiStyles: true, searchIcon: "m-icon-send", placeholder: "Describe what you are looking for \u201CAs we prepare to launch the product, we need ...\u201D" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "handlePastedText function" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Some text here", allowMultipleLines: true, searchMessage: "Search", clearMessage: "Clear", maxNumberOfWords: 10, handlePastedText: (pastedText, currentValue) => {
// If the pasted text or the text box value contains a word immediately followed by an equal sign, format it as a single line.
const shouldFormatAsSingleLine = /\w+=/.test(pastedText) || /\w+=/.test(currentValue);
// Format text on 1 line when needed.
const processedText = shouldFormatAsSingleLine
? pastedText.replaceAll(/\n|\r/g, " ").replace(/\s+/g, " ")
: pastedText;
return processedText;
} })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Show counter" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Some text here", allowMultipleLines: true, searchMessage: "Search", clearMessage: "Clear", maxNumberOfCharacters: 120, showCounter: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(CoreComponents_1.Typography, { children: "Sticky search box" }), (0, jsx_runtime_1.jsx)(BlokSearchBox_1.BlokSearchBox, { onSearch: () => { }, value: "Some text here", allowMultipleLines: true, isSticky: true, shouldShowScrolledStatus: true, stickySearchBoxBackground: "white", searchMessage: "Search", clearMessage: "Clear" })] })] })),
};
exports.PlayGround = {
parameters: {
viewMode: "docs",
},
};
//# sourceMappingURL=BlokSearchBox.stories.js.map