UNPKG

@wix/design-system

Version:

@wix/design-system

977 lines (976 loc) 27.5 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); exports.__esModule = true; exports.default = exports.WithPadding = exports.WithDirections = exports.WithBorder = exports.WithAlignment = exports.Base = void 0; var _react = _interopRequireDefault(require("react")); var _Box = _interopRequireDefault(require("./Box")); var _Text = _interopRequireDefault(require("../Text")); var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Box/Box.story.tsx"; var _default = exports.default = { component: _Box.default }; var Base = exports.Base = { render() { return /*#__PURE__*/_react.default.createElement(_Box.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 13, columnNumber: 7 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 14, columnNumber: 9 } }, "Hi, I'm a box with just text inside")); } }; var WithBorder = exports.WithBorder = { render() { return /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "vertical", gap: "2", __self: this, __source: { fileName: _jsxFileName, lineNumber: 23, columnNumber: 7 } }, /*#__PURE__*/_react.default.createElement(_Box.default, { border: "4px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 24, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 25, columnNumber: 11 } }, "shorthand CSS border")), /*#__PURE__*/_react.default.createElement(_Box.default, { border: "4px solid", borderColor: "R30", __self: this, __source: { fileName: _jsxFileName, lineNumber: 27, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 28, columnNumber: 11 } }, "borderColor property")), /*#__PURE__*/_react.default.createElement(_Box.default, { border: "4px solid grey", borderTopColor: "R30", __self: this, __source: { fileName: _jsxFileName, lineNumber: 30, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 31, columnNumber: 11 } }, "borderTopColor property")), /*#__PURE__*/_react.default.createElement(_Box.default, { border: "4px solid grey", borderRightColor: "R30", __self: this, __source: { fileName: _jsxFileName, lineNumber: 33, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 34, columnNumber: 11 } }, "borderRightColor property")), /*#__PURE__*/_react.default.createElement(_Box.default, { border: "4px solid grey", borderBottomColor: "R30", __self: this, __source: { fileName: _jsxFileName, lineNumber: 36, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 37, columnNumber: 11 } }, "borderBottomColor property")), /*#__PURE__*/_react.default.createElement(_Box.default, { border: "4px solid grey", borderLeftColor: "R30", __self: this, __source: { fileName: _jsxFileName, lineNumber: 39, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 40, columnNumber: 11 } }, "borderLeftColor property"))); } }; var WithPadding = exports.WithPadding = { render() { return /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "vertical", gap: "2", __self: this, __source: { fileName: _jsxFileName, lineNumber: 50, columnNumber: 7 } }, /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "1", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 51, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 52, columnNumber: 11 } }, "padding: 1")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "10px", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 54, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 55, columnNumber: 11 } }, "padding: 10px")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 57, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 58, columnNumber: 11 } }, "padding: tiny")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "small", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 60, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 61, columnNumber: 11 } }, "padding: small")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "medium", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 63, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 64, columnNumber: 11 } }, "padding: medium")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "large", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 66, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 67, columnNumber: 11 } }, "padding: large"))); } }; var WithDirections = exports.WithDirections = { render() { return /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "vertical", gap: "2", __self: this, __source: { fileName: _jsxFileName, lineNumber: 77, columnNumber: 7 } }, /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "vertical", padding: "tiny", gap: "2", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 78, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 84, columnNumber: 11 } }, "direction: vertical"), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 85, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 86, columnNumber: 13 } }, "1")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 88, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 89, columnNumber: 13 } }, "2")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 91, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 92, columnNumber: 13 } }, "3"))), /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "horizontal", padding: "tiny", gap: "2", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 96, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 102, columnNumber: 11 } }, "direction: horizontal"), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 103, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 104, columnNumber: 13 } }, "1")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 106, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 107, columnNumber: 13 } }, "2")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 109, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 110, columnNumber: 13 } }, "3")))); } }; var WithAlignment = exports.WithAlignment = { render() { return /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "vertical", gap: "2", __self: this, __source: { fileName: _jsxFileName, lineNumber: 121, columnNumber: 7 } }, /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "horizontal", gap: "2", __self: this, __source: { fileName: _jsxFileName, lineNumber: 122, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "vertical", padding: "tiny", gap: "2", border: "2px solid grey", height: "300px", verticalAlign: "top", __self: this, __source: { fileName: _jsxFileName, lineNumber: 123, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 131, columnNumber: 13 } }, "verticalAlign: top"), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 132, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 133, columnNumber: 15 } }, "1")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 135, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 136, columnNumber: 15 } }, "2")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 138, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 139, columnNumber: 15 } }, "3"))), /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "vertical", padding: "tiny", gap: "2", border: "2px solid grey", height: "300px", verticalAlign: "middle", __self: this, __source: { fileName: _jsxFileName, lineNumber: 142, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 150, columnNumber: 13 } }, "verticalAlign: middle"), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 151, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 152, columnNumber: 15 } }, "1")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 154, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 155, columnNumber: 15 } }, "2")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 157, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 158, columnNumber: 15 } }, "3"))), /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "vertical", padding: "tiny", gap: "2", border: "2px solid grey", height: "300px", verticalAlign: "bottom", __self: this, __source: { fileName: _jsxFileName, lineNumber: 162, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 170, columnNumber: 13 } }, "verticalAlign: bottom"), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 171, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 172, columnNumber: 15 } }, "1")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 174, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 175, columnNumber: 15 } }, "2")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 177, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 178, columnNumber: 15 } }, "3"))), /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "vertical", padding: "tiny", gap: "2", border: "2px solid grey", height: "300px", verticalAlign: "space-between", __self: this, __source: { fileName: _jsxFileName, lineNumber: 182, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 190, columnNumber: 13 } }, "verticalAlign: space-between"), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 191, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 192, columnNumber: 15 } }, "1")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 194, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 195, columnNumber: 15 } }, "2")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 197, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 198, columnNumber: 15 } }, "3")))), /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "horizontal", gap: "2", __self: this, __source: { fileName: _jsxFileName, lineNumber: 203, columnNumber: 9 } }, /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "horizontal", padding: "tiny", gap: "2", border: "2px solid grey", height: "100px", width: "300px", align: "left", __self: this, __source: { fileName: _jsxFileName, lineNumber: 204, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 213, columnNumber: 13 } }, "align: left"), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 214, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 215, columnNumber: 15 } }, "1")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 217, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 218, columnNumber: 15 } }, "2")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 220, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 221, columnNumber: 15 } }, "3"))), /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "horizontal", padding: "tiny", gap: "2", border: "2px solid grey", height: "100px", width: "300px", align: "right", __self: this, __source: { fileName: _jsxFileName, lineNumber: 225, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 234, columnNumber: 13 } }, "align: right"), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 235, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 236, columnNumber: 15 } }, "1")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 238, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 239, columnNumber: 15 } }, "2")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 241, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 242, columnNumber: 15 } }, "3"))), /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "horizontal", padding: "tiny", gap: "2", border: "2px solid grey", height: "100px", width: "300px", align: "center", __self: this, __source: { fileName: _jsxFileName, lineNumber: 246, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 255, columnNumber: 13 } }, "align: center"), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 256, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 257, columnNumber: 15 } }, "1")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 259, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 260, columnNumber: 15 } }, "2")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 262, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 263, columnNumber: 15 } }, "3"))), /*#__PURE__*/_react.default.createElement(_Box.default, { direction: "horizontal", padding: "tiny", gap: "2", border: "2px solid grey", height: "100px", width: "300px", align: "space-between", __self: this, __source: { fileName: _jsxFileName, lineNumber: 267, columnNumber: 11 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 276, columnNumber: 13 } }, "align: space-between"), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 277, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 278, columnNumber: 15 } }, "1")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 280, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 281, columnNumber: 15 } }, "2")), /*#__PURE__*/_react.default.createElement(_Box.default, { padding: "tiny", border: "2px solid grey", __self: this, __source: { fileName: _jsxFileName, lineNumber: 283, columnNumber: 13 } }, /*#__PURE__*/_react.default.createElement(_Text.default, { __self: this, __source: { fileName: _jsxFileName, lineNumber: 284, columnNumber: 15 } }, "3"))))); } }; //# sourceMappingURL=Box.story.js.map