@yandex/ui
Version:
Yandex UI components
38 lines (37 loc) • 2.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Playground = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var addon_knobs_1 = require("@storybook/addon-knobs");
var bundle_1 = require("@yandex-lego/components/Text/bundle");
var ListTile_1 = require("@yandex-lego/components/ListTile");
var assets_1 = require("./assets");
var spaces = ['3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'].reduce(function (acc, cur) {
acc[cur] = cur;
return acc;
}, {});
var widgets = assets_1.blocks.reduce(function (acc, cur) {
acc[cur] = cur;
return acc;
}, {});
var Playground = function () {
var title = addon_knobs_1.text('Title (required)', 'One-line title', 'Title');
var subtitle = addon_knobs_1.text('Subtitle', 'One-line subtitle or body text', 'Subtitle');
var hasSubtitle = addon_knobs_1.boolean('Has subtitle', true, 'Subtitle');
var overline = addon_knobs_1.text('Overline', 'Overline', 'Overline');
var hasOverline = addon_knobs_1.boolean('Has overline', true, 'Overline');
var inline = addon_knobs_1.boolean('Inline', true, 'Layout');
var alignItems = addon_knobs_1.select('Align items', ['baseline', 'center', 'start', 'end', 'stretch'], 'center', 'Layout');
var leading = addon_knobs_1.select('Leading', widgets, 'Checkbox', 'Leading');
var hasLeading = addon_knobs_1.boolean('Has leading', true, 'Leading');
var trailing = addon_knobs_1.select('Leading', widgets, 'Meta', 'Trailing');
var hasTrailing = addon_knobs_1.boolean('Has trailing', true, 'Trailing');
var leftSpace = addon_knobs_1.select('Left space', spaces, 's', 'Layout');
var rightSpace = addon_knobs_1.select('Right space', spaces, 's', 'Layout');
return (react_1.default.createElement(ListTile_1.ListTile, { alignItems: alignItems, inline: inline, leftSpace: leftSpace, rightSpace: rightSpace, leading: hasLeading ? assets_1.getBlock(leading) : undefined, trailing: hasTrailing ? assets_1.getBlock(trailing) : undefined },
hasOverline ? (react_1.default.createElement(bundle_1.Text, { as: "div", typography: "overline-l", weight: "medium", color: "secondary" }, overline)) : (undefined),
react_1.default.createElement(bundle_1.Text, { as: "div", typography: "control-xl", weight: "regular", color: "primary" }, title),
hasSubtitle ? (react_1.default.createElement(bundle_1.Text, { as: "div", typography: "control-m", weight: "regular", color: "secondary" }, subtitle)) : (undefined)));
};
exports.Playground = Playground;