design-system-simplefi
Version:
Design System for SimpleFi Applications
49 lines • 1.97 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 layout from '../../../theme/layout/layout';
import { Button } from '../../Button';
import { Box } from '../mocks/Box';
import Center from './Center';
export default {
title: 'layout/primitives/Center',
component: Center,
argTypes: {
maxWidth: {
defaultValue: layout.containerWidth,
table: {
defaultValue: { summary: layout.containerWidth },
},
},
},
};
var CenterTemplate = function (args) { return (React.createElement("div", { style: { backgroundColor: '#dadada' } },
React.createElement(Center, __assign({ style: { backgroundColor: '#0275d8' } }, args),
React.createElement(Box, null),
React.createElement(Button, { variant: "outline" }, "Click me"),
React.createElement(Box, null)))); };
export var playground = CenterTemplate.bind({});
playground.args = {
maxWidth: 500,
};
export var WithCenteredChildren = CenterTemplate.bind({});
WithCenteredChildren.args = __assign(__assign({}, playground.args), { areChildrenCentered: true });
export var WithCenteredText = CenterTemplate.bind({});
WithCenteredText.args = __assign(__assign({}, playground.args), { isTextCentered: true });
export var WithGutters = CenterTemplate.bind({});
WithGutters.args = __assign(__assign({}, playground.args), { gutters: SpaceSizes.lg });
export var WithCustomMaxWidth = CenterTemplate.bind({});
WithCustomMaxWidth.args = {
maxWidth: 300,
};
//# sourceMappingURL=Center.stories.js.map