design-system-simplefi
Version:
Design System for SimpleFi Applications
82 lines • 3.29 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 Cluster from './Cluster';
export default {
title: 'layout/primitives/Cluster',
component: Cluster,
argTypes: {
align: {
options: ['center', 'flex-end', 'flex-start', 'baseline', 'stretch'],
control: { type: 'select' },
table: {
defaultValue: { summary: '"stretch"' },
},
},
justify: {
options: [
'center',
'flex-end',
'flex-start',
'space-around',
'space-between',
'space-evenly',
],
control: { type: 'select' },
table: {
defaultValue: { summary: '"flex-start"' },
},
},
wrapperEl: {
control: { type: 'text' },
table: {
defaultValue: { summary: '"div"' },
},
},
parentEl: {
control: { type: 'text' },
table: {
defaultValue: { summary: '"div"' },
},
},
},
};
var ClusterTemplate = function (args) { return (React.createElement(Cluster, __assign({ style: { backgroundColor: '#0275d8' } }, args),
React.createElement(Box, null, "Item"),
React.createElement(Box, { style: { height: '100px' } }, "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 = ClusterTemplate.bind({});
export var WithGap = ClusterTemplate.bind({});
WithGap.args = {
gap: SpaceSizes.sm,
};
export var WithHorizontalAlignment = ClusterTemplate.bind({});
WithHorizontalAlignment.args = __assign(__assign({}, WithGap.args), { justify: 'center' });
export var WithVerticalAlignment = ClusterTemplate.bind({});
WithVerticalAlignment.args = __assign(__assign({}, WithGap.args), { align: 'center' });
export var AsNavigation = function (args) { return (React.createElement(Cluster, __assign({ style: { backgroundColor: '#0275d8' } }, args),
React.createElement(Box, { as: "li" }, "Home"),
React.createElement(Box, { as: "li" }, "Products"),
React.createElement(Box, { as: "li" }, "About us"),
React.createElement(Box, { as: "li" }, "Settings"),
React.createElement(Box, { as: "li" }, "Sign out"))); };
AsNavigation.args = __assign(__assign({}, WithGap.args), { wrapperEl: 'nav', parentEl: 'ul' });
//# sourceMappingURL=Cluster.stories.js.map