design-system-simplefi
Version:
Design System for SimpleFi Applications
39 lines • 2.67 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { prop } from 'ramda';
import { isNotUndefined } from 'ramda-adjunct';
import { SpaceSizes } from '../../../theme/space/space.enums';
import { getSpace } from '../../../utils';
import { AlignItemsPropType } from '../../../types/flex.types';
var Stack = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n align-items: ", ";\n justify-content: flex-start;\n\n /* FIXME: Until we remove 'margin' property from other components we need to\n increase specificity of those nesting , since it can be overriden by inner\n elements with the same specificity. This can lead to inconsistent output\n of visual test if styled-components puts CSS in different order into Head. */\n ", " * {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n ", " * + * {\n margin-top: ", ";\n }\n\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n align-items: ", ";\n justify-content: flex-start;\n\n /* FIXME: Until we remove 'margin' property from other components we need to\n increase specificity of those nesting , since it can be overriden by inner\n elements with the same specificity. This can lead to inconsistent output\n of visual test if styled-components puts CSS in different order into Head. */\n ", " * {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n ", " * + * {\n margin-top: ", ";\n }\n\n ", "\n"])), prop('justify'), function (_a) {
var isRecursive = _a.isRecursive;
return (isRecursive ? '&&' : '&& >');
}, function (_a) {
var isRecursive = _a.isRecursive;
return (isRecursive ? '&&' : '&& >');
}, function (_a) {
var gap = _a.gap, theme = _a.theme;
return getSpace(gap, { theme: theme });
}, function (_a) {
var splitAt = _a.splitAt;
return isNotUndefined(splitAt) &&
"\n :only-child {\n height: 100%;\n }\n\n > :nth-child(" + splitAt + ") {\n margin-bottom: auto;\n }\n ";
});
Stack.propTypes = {
gap: PropTypes.oneOf(Object.values(SpaceSizes)),
justify: AlignItemsPropType,
splitAt: PropTypes.number,
isRecursive: PropTypes.bool,
};
Stack.defaultProps = {
gap: SpaceSizes.none,
justify: 'stretch',
isRecursive: false,
};
export default Stack;
var templateObject_1;
//# sourceMappingURL=Stack.js.map