design-system-simplefi
Version:
Design System for SimpleFi Applications
61 lines • 2.31 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 } from '../mocks/Box';
import Grid from './Grid';
export default {
title: 'layout/primitives/Grid',
component: Grid,
argTypes: {
align: {
options: ['center', 'flex-end', 'flex-start', 'baseline', 'stretch'],
control: { type: 'select' },
table: {
defaultValue: { summary: '"stretch"' },
},
},
wrapperEl: {
control: { type: 'text' },
table: {
defaultValue: { summary: '"div"' },
},
},
parentEl: {
control: { type: 'text' },
table: {
defaultValue: { summary: '"div"' },
},
},
},
};
var GridTemplate = function (args) { return (React.createElement(Grid, __assign({ style: { backgroundColor: '#0275d8' } }, args),
React.createElement(Box, null, "Item"),
React.createElement(Box, null, "Long item"),
React.createElement(Box, null, "Very long item item item"),
React.createElement(Box, null, "Item"),
React.createElement(Box, null, "Item"),
React.createElement(Box, null, "Long item"),
React.createElement(Box, null, "Very long item item item item"),
React.createElement(Box, null, "Very long item item item"),
React.createElement(Box, null, "Item"),
React.createElement(Box, null, "Long item"))); };
export var playground = GridTemplate.bind({});
export var WithGap = GridTemplate.bind({});
WithGap.args = {
gap: SpaceSizes.sm,
};
export var WithVerticalAlignment = GridTemplate.bind({});
WithVerticalAlignment.args = __assign(__assign({}, WithGap.args), { align: 'center' });
export var WithCustomColumnsNumber = GridTemplate.bind({});
WithCustomColumnsNumber.args = __assign(__assign({}, WithGap.args), { cols: 3 });
//# sourceMappingURL=Grid.stories.js.map