lucid-ui
Version:
A UI component library from Xandr.
314 lines • 15.2 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Title = exports.InvisibleAndDisabled = exports.Invisible = exports.Stateless = exports.ArrayOptions = exports.NoSelectionHighlighting = exports.RichContent = exports.MaxMenuHeight = exports.NoUnselect = exports.DisabledSelect = exports.DisabledOptions = exports.GroupedOptions = exports.FormattedOptions = exports.NamedOptions = exports.Basic = void 0;
var lodash_1 = require("lodash");
var react_1 = __importStar(require("react"));
var SingleSelect_1 = __importDefault(require("./SingleSelect"));
var DangerIcon_1 = __importDefault(require("../Icon/DangerIcon/DangerIcon"));
var PlusIcon_1 = __importDefault(require("../Icon/PlusIcon/PlusIcon"));
var SuccessIcon_1 = __importDefault(require("../Icon/SuccessIcon/SuccessIcon"));
var InfoIcon_1 = __importDefault(require("../Icon/InfoIcon/InfoIcon"));
//👇 Provide Storybook with the component name, 'section', any subcomponents and a description
exports.default = {
title: 'Controls/SingleSelect',
component: SingleSelect_1.default,
subcomponents: {
'SingleSelect.Placeholder': SingleSelect_1.default.Placeholder,
'SingleSelect.Option': SingleSelect_1.default.Option,
'SingleSelect.Option.Selected': SingleSelect_1.default.Option.Selected,
'SingleSelect.OptionGroup': SingleSelect_1.default.OptionGroup,
},
parameters: {
docs: {
description: {
component: SingleSelect_1.default.peek.description,
},
},
},
};
//👇 Destructure any child components that we will need
var Option = SingleSelect_1.default.Option, OptionGroup = SingleSelect_1.default.OptionGroup;
//👇 Add a key prop to each element of the array
function addKeys(children) {
return (0, lodash_1.map)(children, function (child, index) { return (__assign(__assign({}, child), { key: index })); });
}
//👇 Create a “template” of how args map to rendering
var Template = function (args) {
var _a = (0, react_1.useState)(null), selectedIndex = _a[0], setSelectedIndex = _a[1];
var _b = (0, react_1.useState)(null), selectedOptionName = _b[0], setSelectedOptionName = _b[1];
var handleSelect = function (optionIndex) {
var name = !(0, lodash_1.isNil)(optionIndex)
? args.children[optionIndex].props.name
: null;
setSelectedIndex(optionIndex);
setSelectedOptionName(name);
};
return (react_1.default.createElement("section", { style: { minHeight: '10em' } },
react_1.default.createElement(SingleSelect_1.default, __assign({}, args, { onSelect: function (e) { return handleSelect(e); } })),
!(0, lodash_1.isNil)(selectedIndex) && (react_1.default.createElement("section", { style: { paddingTop: 9, paddingLeft: 9 } },
"Selected Index: ",
JSON.stringify(selectedIndex))),
selectedOptionName && (react_1.default.createElement("section", { style: { paddingLeft: 9 } },
react_1.default.createElement("p", null,
"Selected Option Name: ",
JSON.stringify(selectedOptionName))))));
};
/** Basic */
exports.Basic = Template.bind({});
exports.Basic.args = {
Placeholder: 'Select Color',
children: addKeys([
react_1.default.createElement(Option, null, "Red"),
react_1.default.createElement(Option, null, "Green"),
react_1.default.createElement(Option, null, "Blue"),
]),
};
/** Named Options */
exports.NamedOptions = Template.bind({});
exports.NamedOptions.args = __assign(__assign({}, exports.Basic.args), { children: addKeys([
react_1.default.createElement(Option, { name: 'red' }, "Red"),
react_1.default.createElement(Option, { name: 'green' }, "Green"),
react_1.default.createElement(Option, { name: 'blue' }, "Blue"),
]) });
exports.NamedOptions.parameters = {
docs: {
description: {
story: "Use named options when you need to display different values within the dropdown and elsewhere on the screen after the user makes a selection.\n ",
},
},
};
/** Formatted Options */
var OptionCols = function (_a) {
var col1 = _a.col1, col2 = _a.col2;
return (react_1.default.createElement("div", { style: { display: 'flex' } },
react_1.default.createElement("div", { style: { width: 100 } }, col1),
react_1.default.createElement("div", null, col2)));
};
exports.FormattedOptions = Template.bind({});
exports.FormattedOptions.args = __assign(__assign({}, exports.Basic.args), { children: addKeys([
react_1.default.createElement(OptionGroup, null,
react_1.default.createElement(OptionCols, { col1: 'NAME', col2: 'ID' }),
react_1.default.createElement(Option, { Selected: 'Red (#FF0000)' },
react_1.default.createElement(OptionCols, { col1: 'Red', col2: '#FF0000' })),
react_1.default.createElement(Option, { Selected: 'Green (#00FF00)' },
react_1.default.createElement(OptionCols, { col1: 'Green', col2: '#00FF00' })),
react_1.default.createElement(Option, { Selected: 'Blue (#0000FF)' },
react_1.default.createElement(OptionCols, { col1: 'Blue', col2: '#0000FF' }))),
]) });
exports.FormattedOptions.parameters = {
docs: {
description: {
story: "Use multiple columns of data in your dropdown when additional information is needed to make a selection.\n ",
},
},
};
/** Grouped Options */
exports.GroupedOptions = Template.bind({});
exports.GroupedOptions.args = __assign(__assign({}, exports.Basic.args), { children: addKeys([
react_1.default.createElement(OptionGroup, null,
"Screen",
react_1.default.createElement(Option, null, "Red"),
react_1.default.createElement(Option, null, "Green"),
react_1.default.createElement(Option, null, "Blue")),
react_1.default.createElement(OptionGroup, null,
"Print",
react_1.default.createElement(Option, null, "Cyan"),
react_1.default.createElement(Option, null, "Yellow"),
react_1.default.createElement(Option, null, "Magenta"),
react_1.default.createElement(Option, null, "Black")),
]) });
exports.GroupedOptions.parameters = {
docs: {
description: {
story: "Grouped options allows you to have sections within your dropdown. Use this to help frame users' understanding of the options.\n ",
},
},
};
/** Disabled Options */
exports.DisabledOptions = Template.bind({});
exports.DisabledOptions.args = __assign(__assign({}, exports.Basic.args), { children: addKeys([
react_1.default.createElement(Option, { isDisabled: true }, "Red"),
react_1.default.createElement(Option, null, "Green"),
react_1.default.createElement(Option, { isDisabled: true }, "Blue"),
]) });
exports.DisabledOptions.parameters = {
docs: {
description: {
story: "Apply `isDisabled` to dropdown options that aren't currently available.\n ",
},
},
};
/** Disabled Select */
exports.DisabledSelect = Template.bind({});
exports.DisabledSelect.args = __assign(__assign({}, exports.Basic.args), { isDisabled: true });
exports.DisabledSelect.parameters = {
docs: {
description: {
story: "Apply `isDisabled` to the dropdown if none of the options are currently available.\n ",
},
},
};
/** No Unselect */
exports.NoUnselect = Template.bind({});
exports.NoUnselect.args = __assign(__assign({}, exports.Basic.args), { hasReset: false });
exports.NoUnselect.parameters = {
docs: {
description: {
story: "This removes the default state, displayed as the `Placeholder`. Use `hasReset=\"false\"` to prevent users from deselecting a setting.\n ",
},
},
};
/** Max Menu Height */
exports.MaxMenuHeight = Template.bind({});
exports.MaxMenuHeight.args = __assign(__assign({}, exports.Basic.args), { maxMenuHeight: '7em', children: addKeys([
react_1.default.createElement(Option, null, "Aliceblue"),
react_1.default.createElement(Option, null, "Antiquewhite"),
react_1.default.createElement(Option, null, "Aqua"),
react_1.default.createElement(Option, null, "Aquamarine"),
react_1.default.createElement(Option, null, "Azure"),
react_1.default.createElement(Option, null, "Beige"),
react_1.default.createElement(Option, null, "Bisque"),
react_1.default.createElement(Option, null, "Black"),
react_1.default.createElement(Option, null, "Blanchedalmond"),
react_1.default.createElement(Option, null, "Blue"),
react_1.default.createElement(Option, null, "Blueviolet"),
react_1.default.createElement(Option, null, "Brown"),
react_1.default.createElement(Option, null, "Burlywood"),
react_1.default.createElement(Option, null, "Cadetblue"),
react_1.default.createElement(Option, null, "Chartreuse"),
]) });
exports.MaxMenuHeight.parameters = {
docs: {
description: {
story: "Provide a fixed menu height with the `maxMenuHeight` prop. It will allow users to scroll through the options within a fixed height.\n ",
},
},
};
/** Rich Content */
exports.RichContent = Template.bind({});
exports.RichContent.args = __assign(__assign({}, exports.Basic.args), { Placeholder: (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(PlusIcon_1.default, { style: { marginRight: 4 } }),
" Add Color")), children: addKeys([
react_1.default.createElement(Option, null,
react_1.default.createElement(DangerIcon_1.default, { style: { marginRight: 4 } }),
" Red"),
react_1.default.createElement(Option, null,
react_1.default.createElement(SuccessIcon_1.default, { style: { marginRight: 4 } }),
" Green"),
react_1.default.createElement(Option, null,
react_1.default.createElement(InfoIcon_1.default, { style: { marginRight: 4 } }),
" Blue"),
]) });
exports.RichContent.parameters = {
docs: {
description: {
story: "You can include rich content in the dropdown. Use icons or other rich content where an image will help users make a selection: a company logo near the company name, for example.\n ",
},
},
};
/** No Selection Highlighting */
exports.NoSelectionHighlighting = Template.bind({});
exports.NoSelectionHighlighting.args = __assign(__assign({}, exports.Basic.args), { isSelectionHighlighted: false });
exports.NoSelectionHighlighting.parameters = {
docs: {
description: {
story: "Use `isSelectionHighlighted=\"false\"` when the dropdown defaults to null selections such as 'All' or 'Any'. The grey outline indicates that this selection does not need users' attention.\n ",
},
},
};
/** Array Options */
exports.ArrayOptions = Template.bind({});
exports.ArrayOptions.args = {
Placeholder: 'Select a Number',
Option: addKeys([react_1.default.createElement(Option, null, "1"), react_1.default.createElement(Option, null, "2"), react_1.default.createElement(Option, null, "3")]),
};
exports.ArrayOptions.parameters = {
docs: {
description: {
story: "If needed, you can pass your dropdown option data as an array.\n ",
},
},
};
/** Stateless */
exports.Stateless = Template.bind({});
exports.Stateless.args = __assign(__assign({}, exports.Basic.args), { selectedIndex: 1, DropMenu: { focusedIndex: 2, isExpanded: true }, style: { minHeight: 220 }, children: addKeys([
react_1.default.createElement(OptionGroup, null,
"Preferred",
react_1.default.createElement(Option, null, "Red"),
react_1.default.createElement(Option, null, "Green"),
react_1.default.createElement(Option, null, "Blue")),
react_1.default.createElement(Option, null, "Orange"),
react_1.default.createElement(Option, { isDisabled: true }, "Violet"),
react_1.default.createElement(Option, { isDisabled: true }, "Brown"),
]) });
exports.Stateless.parameters = {
docs: {
description: {
story: "\n This example shows the various states available in `SingleSelect`.\n ",
},
},
};
/** Invisible */
exports.Invisible = Template.bind({});
exports.Invisible.args = __assign(__assign({}, exports.Basic.args), { isInvisible: true });
exports.Invisible.parameters = {
docs: {
description: {
story: "Setting the `IsInvisible` prop to 'true' removes the dropdown border. The lack of a border gives the dropdown a lighter visual weight within a data-intense layout.\n\t\t\t",
},
},
};
/** Invisible and Disabled */
exports.InvisibleAndDisabled = Template.bind({});
exports.InvisibleAndDisabled.args = __assign(__assign({}, exports.Basic.args), { isInvisible: true, isDisabled: true });
exports.InvisibleAndDisabled.parameters = {
docs: {
description: {
story: "Setting the `IsInvisible` prop to 'true' removes the dropdown border, and `isDisabled` indicates that the dropdown option isn't currently available.\n\t\t\t",
},
},
};
/** With Title */
exports.Title = Template.bind({});
exports.Title.args = __assign(__assign({}, exports.Basic.args), { Title: 'Sample Title' });
exports.Title.parameters = {
docs: {
description: {
story: "Setting the `Title` prop to 'Sample Title' adds a title to the single select.",
},
},
};
//# sourceMappingURL=SingleSelect.stories.js.map