design-system-simplefi
Version:
Design System for SimpleFi Applications
55 lines • 2.57 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, { useRef } from 'react';
import { action } from '@storybook/addon-actions';
import { Paragraph } from '../typography';
import { Center } from '../layout';
import ControlDropdown from './ControlDropdown';
export default {
title: 'components/ControlDropdown',
component: ControlDropdown,
parameters: {
docs: {
inlineStories: false,
iframeHeight: 200,
},
},
};
var ControlDropdownTemplate = function (args) {
var handlerRef = useRef(null);
return (React.createElement(Center, { maxWidth: 150, areChildrenCentered: true },
React.createElement("span", { ref: handlerRef },
React.createElement("button", { type: "button" }, "Dropdown handler"),
React.createElement(ControlDropdown, __assign({}, args, { parentRef: handlerRef }),
React.createElement(Paragraph, null, "Dropdown content")))));
};
export var Playground = ControlDropdownTemplate.bind({});
Playground.args = {
isOpen: true,
title: 'Dropdown title',
onOpen: action('OnOpen'),
onClose: action('OnClose'),
onSubmit: action('OnSubmit'),
};
export var WithResetButton = ControlDropdownTemplate.bind({});
WithResetButton.args = __assign(__assign({}, Playground.args), { onReset: action('OnReset') });
export var BottomLeftPlacement = ControlDropdownTemplate.bind({});
BottomLeftPlacement.args = __assign(__assign({}, Playground.args), { placement: 'bottom-left' });
export var BottomPlacement = ControlDropdownTemplate.bind({});
BottomPlacement.args = __assign(__assign({}, Playground.args), { placement: 'bottom' });
export var BottomRightPlacement = ControlDropdownTemplate.bind({});
BottomRightPlacement.args = __assign(__assign({}, Playground.args), { placement: 'bottom-right' });
export var WithCustomWidth = ControlDropdownTemplate.bind({});
WithCustomWidth.args = __assign(__assign({}, BottomPlacement.args), { width: 500 });
export var WithCustomLabels = ControlDropdownTemplate.bind({});
WithCustomLabels.args = __assign(__assign({}, WithResetButton.args), { submitLabel: 'Send', closeLabel: 'Cancel', resetLabel: 'Wipe out' });
//# sourceMappingURL=ControlDropdown.stories.js.map