design-system-simplefi
Version:
Design System for SimpleFi Applications
64 lines • 2.7 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 from 'react';
import { SpaceSizes } from '../../../theme/space/space.enums';
import { Box as MockBox } from '../mocks/Box';
import Inline from './Inline';
import { StretchEnum } from './Inline.enums';
export default {
title: 'layout/primitives/Inline',
component: Inline,
argTypes: {
align: {
options: ['center', 'flex-end', 'flex-start', 'baseline', 'stretch'],
control: { type: 'select' },
},
justify: {
options: [
'center',
'flex-end',
'flex-start',
'space-around',
'space-between',
'space-evenly',
],
control: { type: 'select' },
},
},
};
var Box = function (_a) {
var _b = _a.style, style = _b === void 0 ? {} : _b;
return (React.createElement(MockBox, { style: __assign({ width: '150px', minHeight: '150px' }, style) }));
};
var InlineTemplate = function (args) { return (React.createElement(Inline, __assign({ style: { backgroundColor: '#0275d8' } }, args),
React.createElement(Box, null),
React.createElement(Box, { style: { height: '300px' } }),
React.createElement(Box, null),
React.createElement(Box, null))); };
export var playground = InlineTemplate.bind({});
export var WithGap = InlineTemplate.bind({});
WithGap.args = {
gap: SpaceSizes.sm,
};
export var WithHorizontalAlignment = InlineTemplate.bind({});
WithHorizontalAlignment.args = __assign(__assign({}, WithGap.args), { justify: 'center' });
export var WithVerticalAlignment = InlineTemplate.bind({});
WithVerticalAlignment.args = __assign(__assign({}, WithGap.args), { align: 'center' });
export var WithStretchStart = InlineTemplate.bind({});
WithStretchStart.args = __assign(__assign({}, WithGap.args), { stretch: StretchEnum.start });
export var WithStretchEnd = InlineTemplate.bind({});
WithStretchEnd.args = __assign(__assign({}, WithGap.args), { stretch: StretchEnum.end });
export var WithStretchAll = InlineTemplate.bind({});
WithStretchAll.args = __assign(__assign({}, WithGap.args), { stretch: StretchEnum.all });
export var WithStretchAtIndex = InlineTemplate.bind({});
WithStretchAtIndex.args = __assign(__assign({}, WithGap.args), { stretch: 2 });
//# sourceMappingURL=Inline.stories.js.map