@yandex/ui/esm/ListTile/__examples__/playground.js

Yandex UI components

import React from 'react';
import { text, boolean, select } from '@storybook/addon-knobs';
import { Text } from '@yandex-lego/components/Text/bundle';
import { ListTile } from '@yandex-lego/components/ListTile';
import { blocks, getBlock } from './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 = blocks.reduce(function (acc, cur) {
    acc[cur] = cur;
    return acc;
}, {});
export var Playground = function () {
    var title = text('Title (required)', 'One-line title', 'Title');
    var subtitle = text('Subtitle', 'One-line subtitle or body text', 'Subtitle');
    var hasSubtitle = boolean('Has subtitle', true, 'Subtitle');
    var overline = text('Overline', 'Overline', 'Overline');
    var hasOverline = boolean('Has overline', true, 'Overline');
    var inline = boolean('Inline', true, 'Layout');
    var alignItems = select('Align items', ['baseline', 'center', 'start', 'end', 'stretch'], 'center', 'Layout');
    var leading = select('Leading', widgets, 'Checkbox', 'Leading');
    var hasLeading = boolean('Has leading', true, 'Leading');
    var trailing = select('Leading', widgets, 'Meta', 'Trailing');
    var hasTrailing = boolean('Has trailing', true, 'Trailing');
    var leftSpace = select('Left space', spaces, 's', 'Layout');
    var rightSpace = select('Right space', spaces, 's', 'Layout');
    return (React.createElement(ListTile, { alignItems: alignItems, inline: inline, leftSpace: leftSpace, rightSpace: rightSpace, leading: hasLeading ? getBlock(leading) : undefined, trailing: hasTrailing ? getBlock(trailing) : undefined },
        hasOverline ? (React.createElement(Text, { as: "div", typography: "overline-l", weight: "medium", color: "secondary" }, overline)) : (undefined),
        React.createElement(Text, { as: "div", typography: "control-xl", weight: "regular", color: "primary" }, title),
        hasSubtitle ? (React.createElement(Text, { as: "div", typography: "control-m", weight: "regular", color: "secondary" }, subtitle)) : (undefined)));
};