design-system-simplefi
Version:
Design System for SimpleFi Applications
72 lines • 3.08 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 Stack from './Stack';
import { Button } from '../../Button';
import { Box } from '../mocks/Box';
export default {
title: 'layout/primitives/Stack',
component: Stack,
argTypes: {
justify: {
options: ['center', 'flex-end', 'flex-start', 'baseline', 'stretch'],
control: { type: 'select' },
},
},
};
export var playground = function (args) { return (React.createElement("div", { style: { height: '20rem' } },
React.createElement(Stack, __assign({ style: { backgroundColor: '#0275d8' } }, args),
React.createElement(Box, null),
React.createElement(Button, { variant: "outline" }, "Click me gently"),
React.createElement(Stack, { style: { backgroundColor: '#80baeb' } },
React.createElement(Box, null),
React.createElement(Box, null)),
React.createElement(Box, null)))); };
playground.args = { gap: SpaceSizes.lg };
export var WithGap = function (args) { return (React.createElement(Stack, __assign({ style: { backgroundColor: '#0275d8' } }, args),
React.createElement(Box, null),
React.createElement(Box, null),
React.createElement(Box, null))); };
WithGap.args = {
gap: SpaceSizes.lg,
};
export var RecursiveGap = function (args) { return (React.createElement(Stack, __assign({ style: { backgroundColor: '#0275d8' } }, args),
React.createElement(Box, null),
React.createElement(Box, { style: { backgroundColor: '#579aa0' } },
React.createElement(Box, null),
React.createElement("div", { style: { backgroundColor: '#b4b4b4' } },
React.createElement(Box, null),
React.createElement(Box, null))),
React.createElement(Box, null))); };
RecursiveGap.args = {
gap: SpaceSizes.xl,
isRecursive: true,
};
export var SplitedStack = function (args) { return (React.createElement("div", { style: { height: '20rem' } },
React.createElement(Stack, __assign({ style: { backgroundColor: '#0275d8' } }, args),
React.createElement(Box, null),
React.createElement(Box, null),
React.createElement(Box, null)))); };
SplitedStack.args = {
splitAt: 2,
gap: SpaceSizes.sm,
};
export var WithHorizontalAlignment = function (args) { return (React.createElement(Stack, __assign({ style: { backgroundColor: '#0275d8' } }, args),
React.createElement(Box, null),
React.createElement(Button, { variant: "outline" }, "Click me gently"),
React.createElement(Box, null))); };
WithHorizontalAlignment.args = {
gap: SpaceSizes.sm,
justify: 'center',
};
//# sourceMappingURL=Stack.stories.js.map