design-system-simplefi
Version:
Design System for SimpleFi Applications
47 lines • 1.82 kB
JavaScript
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);
};
import React, { useState } from 'react';
import { Center } from '../layout';
import SettingSelector from './SettingSelector';
export default {
title: 'components/SettingsSelector',
component: SettingSelector,
parameters: {
docs: {
inlineStories: false,
iframeHeight: 200,
},
},
args: {
selectionList: ['ETH', 'USD', 'EUR'],
title: 'Show value in',
},
};
var ControlDropdownTemplate = function (args) {
// eslint-disable-next-line
var _a = useState(args.selectionList[0]), selected = _a[0], setSelected = _a[1];
return (React.createElement(Center, { maxWidth: 150, areChildrenCentered: true },
React.createElement(SettingSelector, __assign({}, args, { selected: selected, onSelect: function (item) { return setSelected(item); } }))));
};
export var Playground = ControlDropdownTemplate.bind({});
export var Period = ControlDropdownTemplate.bind({});
Period.args = __assign(__assign({}, Playground.args), { paneWidth: 120, position: 'bottom-right', selectionList: [
'all',
'last week',
'last month',
'last 12-months',
'year-to-date',
'custom range',
], title: 'Period' });
export var Chain = ControlDropdownTemplate.bind({});
Chain.args = __assign(__assign({}, Playground.args), { selectionList: ['ETH', 'POLY', 'OPT'], title: 'Chain' });
//# sourceMappingURL=SettingSelector.stories.js.map