@wix/design-system
Version:
@wix/design-system
139 lines • 9.86 kB
JavaScript
import React from 'react';
import Box from './Box';
import Text from '../Text';
export default {
component: Box,
};
export const Base = {
render() {
return (React.createElement(Box, null,
React.createElement(Text, null, "Hi, I'm a box with just text inside")));
},
};
export const WithBorder = {
render() {
return (React.createElement(Box, { direction: "vertical", gap: "2" },
React.createElement(Box, { border: "4px solid grey" },
React.createElement(Text, null, "shorthand CSS border")),
React.createElement(Box, { border: "4px solid", borderColor: "R30" },
React.createElement(Text, null, "borderColor property")),
React.createElement(Box, { border: "4px solid grey", borderTopColor: "R30" },
React.createElement(Text, null, "borderTopColor property")),
React.createElement(Box, { border: "4px solid grey", borderRightColor: "R30" },
React.createElement(Text, null, "borderRightColor property")),
React.createElement(Box, { border: "4px solid grey", borderBottomColor: "R30" },
React.createElement(Text, null, "borderBottomColor property")),
React.createElement(Box, { border: "4px solid grey", borderLeftColor: "R30" },
React.createElement(Text, null, "borderLeftColor property"))));
},
};
export const WithPadding = {
render() {
return (React.createElement(Box, { direction: "vertical", gap: "2" },
React.createElement(Box, { padding: "1", border: "2px solid grey" },
React.createElement(Text, null, "padding: 1")),
React.createElement(Box, { padding: "10px", border: "2px solid grey" },
React.createElement(Text, null, "padding: 10px")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "padding: tiny")),
React.createElement(Box, { padding: "small", border: "2px solid grey" },
React.createElement(Text, null, "padding: small")),
React.createElement(Box, { padding: "medium", border: "2px solid grey" },
React.createElement(Text, null, "padding: medium")),
React.createElement(Box, { padding: "large", border: "2px solid grey" },
React.createElement(Text, null, "padding: large"))));
},
};
export const WithDirections = {
render() {
return (React.createElement(Box, { direction: "vertical", gap: "2" },
React.createElement(Box, { direction: "vertical", padding: "tiny", gap: "2", border: "2px solid grey" },
React.createElement(Text, null, "direction: vertical"),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "1")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "2")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "3"))),
React.createElement(Box, { direction: "horizontal", padding: "tiny", gap: "2", border: "2px solid grey" },
React.createElement(Text, null, "direction: horizontal"),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "1")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "2")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "3")))));
},
};
export const WithAlignment = {
render() {
return (React.createElement(Box, { direction: "vertical", gap: "2" },
React.createElement(Box, { direction: "horizontal", gap: "2" },
React.createElement(Box, { direction: "vertical", padding: "tiny", gap: "2", border: "2px solid grey", height: "300px", verticalAlign: "top" },
React.createElement(Text, null, "verticalAlign: top"),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "1")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "2")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "3"))),
React.createElement(Box, { direction: "vertical", padding: "tiny", gap: "2", border: "2px solid grey", height: "300px", verticalAlign: "middle" },
React.createElement(Text, null, "verticalAlign: middle"),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "1")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "2")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "3"))),
React.createElement(Box, { direction: "vertical", padding: "tiny", gap: "2", border: "2px solid grey", height: "300px", verticalAlign: "bottom" },
React.createElement(Text, null, "verticalAlign: bottom"),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "1")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "2")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "3"))),
React.createElement(Box, { direction: "vertical", padding: "tiny", gap: "2", border: "2px solid grey", height: "300px", verticalAlign: "space-between" },
React.createElement(Text, null, "verticalAlign: space-between"),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "1")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "2")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "3")))),
React.createElement(Box, { direction: "horizontal", gap: "2" },
React.createElement(Box, { direction: "horizontal", padding: "tiny", gap: "2", border: "2px solid grey", height: "100px", width: "300px", align: "left" },
React.createElement(Text, null, "align: left"),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "1")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "2")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "3"))),
React.createElement(Box, { direction: "horizontal", padding: "tiny", gap: "2", border: "2px solid grey", height: "100px", width: "300px", align: "right" },
React.createElement(Text, null, "align: right"),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "1")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "2")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "3"))),
React.createElement(Box, { direction: "horizontal", padding: "tiny", gap: "2", border: "2px solid grey", height: "100px", width: "300px", align: "center" },
React.createElement(Text, null, "align: center"),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "1")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "2")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "3"))),
React.createElement(Box, { direction: "horizontal", padding: "tiny", gap: "2", border: "2px solid grey", height: "100px", width: "300px", align: "space-between" },
React.createElement(Text, null, "align: space-between"),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "1")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "2")),
React.createElement(Box, { padding: "tiny", border: "2px solid grey" },
React.createElement(Text, null, "3"))))));
},
};
//# sourceMappingURL=Box.story.js.map