wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
39 lines • 1.72 kB
JavaScript
import * as React from 'react';
import classnames from 'classnames';
import styles from './styles.scss';
var Placeholder = function (_a) {
var _b;
var skin = _a.skin, children = _a.children, width = _a.width, height = _a.height;
return (React.createElement("div", { style: { width: width, height: height }, className: classnames(styles.placeholder, (_b = {},
_b[styles.light] = skin === 'light',
_b[styles.dark] = skin === 'dark',
_b)) }, children));
};
Placeholder.defaultProps = {
skin: 'dark',
};
var Stack = function (_a) {
var children = _a.children, justifyContent = _a.justifyContent, gap = _a.gap, width = _a.width, height = _a.height, flexDirection = _a.flexDirection, alignItems = _a.alignItems, padding = _a.padding, margin = _a.margin;
return (React.createElement("div", { style: {
justifyContent: justifyContent,
gap: gap,
flexDirection: flexDirection,
alignItems: alignItems,
padding: padding,
margin: margin,
width: width,
height: height,
}, className: classnames(styles.stack) }, children));
};
var Background = function (_a) {
var _b;
var skin = _a.skin, children = _a.children;
return (React.createElement("div", { className: classnames(styles.background, (_b = {},
_b[styles.dark] = skin === 'dark',
_b[styles.light] = skin === 'light',
_b[styles.blue] = skin === 'blue',
_b[styles.yellow] = skin === 'yellow',
_b)) }, children));
};
export default { Placeholder: Placeholder, Stack: Stack, Background: Background };
//# sourceMappingURL=StorybookComponents.js.map