UNPKG

@wix/design-system

Version:

@wix/design-system

857 lines (856 loc) 26.1 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _react = _interopRequireDefault(require("react")); var _react2 = require("@storybook/react"); var _MarketingLayout = _interopRequireDefault(require("../MarketingLayout")); var _Button = _interopRequireDefault(require("../../Button")); var _Box = _interopRequireDefault(require("../../Box")); var _Badge = _interopRequireDefault(require("../../Badge")); var _Image = _interopRequireDefault(require("../../Image")); var _Card = _interopRequireDefault(require("../../Card")); var _constants = require("../constants"); var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/MarketingLayout/test/MarketingLayout.visual.jsx", _this = void 0; var customImageNode = /*#__PURE__*/_react["default"].createElement(_Box["default"], { backgroundColor: "R00", width: "100%", height: "200px", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 12, columnNumber: 3 } }); var customImageStaticSize = /*#__PURE__*/_react["default"].createElement(_Box["default"], { backgroundColor: "R00", width: "200px", height: "200px", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 16, columnNumber: 3 } }); var customImageUrl = 'data:image/png;base64,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'; var sizes = Object.values(_constants.SIZES); var directions = Object.values(_constants.DIRECTIONS); var commonProps = { title: 'Marketing Card Title', description: 'Connect to Google and get indexed in seconds so people can easily find your site.', actions: /*#__PURE__*/_react["default"].createElement(_Button["default"], { size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 29, columnNumber: 12 } }, "Go for it") }; var tests = [{ describe: 'Sanity', its: [{ it: 'Default props', props: {} }] }, { describe: 'Align Items', its: [{ it: 'Center', props: { alignItems: 'center' } }, { it: 'Stretch', props: { alignItems: 'stretch' } }] }, { describe: 'Size', its: sizes.map(function (size) { return { it: size, props: { size: size, image: customImageStaticSize } }; }) }, { describe: 'Image', its: [{ it: 'Tiny', props: { size: 'tiny', image: customImageStaticSize } }, { it: 'Small', props: { size: 'small', image: customImageStaticSize } }, { it: 'Medium', props: { size: 'medium', image: customImageStaticSize } }, { it: 'URL', props: { image: customImageUrl } }] }, { describe: 'Inverted Image', its: [{ it: 'Tiny', props: { inverted: true, size: 'tiny', image: customImageStaticSize } }, { it: 'Small', props: { inverted: true, size: 'small', image: customImageStaticSize } }, { it: 'Medium', props: { inverted: true, size: 'medium', image: customImageStaticSize } }, { it: 'URL', props: { inverted: true, image: customImageUrl } }] }, { describe: 'Direction', its: directions.map(function (direction) { return { it: direction, props: { direction: direction, image: customImageNode } }; }) }, { describe: 'Direction Vertical', its: sizes.map(function (size) { return { it: size.toUpperCase(), props: { direction: 'vertical', size: size, image: customImageNode } }; }) }, { describe: 'Inverted Layout', its: [{ it: 'Tiny', props: { inverted: true, size: 'tiny' } }, { it: 'Small', props: { inverted: true, size: 'small' } }, { it: 'Medium', props: { inverted: true, size: 'medium' } }] }, { describe: 'No actions', its: [{ it: 'Tiny', props: { size: 'tiny', actions: null } }, { it: 'Small', props: { size: 'small', actions: null } }, { it: 'Medium', props: { size: 'medium', actions: null } }] }, { describe: 'No image', its: [{ it: 'long description', props: { description: 'Very long description, Very long description, Very long description, Very long description, Very long description, Very long description, Very long description, Very long description, Very long description, Very long description, Very long description, ' } }] }, { describe: 'Image Background Color', its: [{ it: 'Custom Color', props: { imageBackgroundColor: '#D6453D' } }, { it: 'Palette Color', props: { imageBackgroundColor: 'R00' } }, { it: 'Inverted Layout', props: { inverted: true, imageBackgroundColor: 'R00' } }, { it: 'With Custom Image', props: { imageBackgroundColor: 'B20', image: customImageNode } }, { it: 'With URL', props: { imageBackgroundColor: 'B20', image: customImageUrl } }] }, { describe: 'Badge', its: [{ it: 'with badge', props: { badge: /*#__PURE__*/_react["default"].createElement(_Badge["default"], { size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 145, columnNumber: 43 } }, "badge") } }, { it: 'with hidden badge', props: { hiddenBadge: true } }] }, { describe: 'Image padding', its: [{ it: 'should have image padding for image with default imagePadding', props: { title: 'Check-in app by Wix', description: 'Download our app dedicated for helping you check-in guest and track your event right', actions: /*#__PURE__*/_react["default"].createElement(_Box["default"], { gap: 2, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 159, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "dark", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 160, columnNumber: 15 } }, "Get the App"), /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "light", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 163, columnNumber: 15 } }, "Learn More")), image: /*#__PURE__*/_react["default"].createElement(_Image["default"], { height: "100%", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 168, columnNumber: 18 } }) } }, { it: 'should have no padding for image when imagePadding is set to false', props: { title: 'Check-in app by Wix', description: 'Download our app dedicated for helping you check-in guest and track your event right', actions: /*#__PURE__*/_react["default"].createElement(_Box["default"], { gap: 2, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 178, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "dark", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 179, columnNumber: 15 } }, "Get the App"), /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "light", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 182, columnNumber: 15 } }, "Learn More")), imagePadding: false, image: /*#__PURE__*/_react["default"].createElement(_Image["default"], { height: "100%", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 188, columnNumber: 18 } }) } }, { it: 'should have no padding for image when imagePadding is set to false and layout is inverted', props: { inverted: true, title: 'Check-in app by Wix', description: 'Download our app dedicated for helping you check-in guest and track your event right', actions: /*#__PURE__*/_react["default"].createElement(_Box["default"], { gap: 2, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 199, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "dark", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 200, columnNumber: 15 } }, "Get the App"), /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "light", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 203, columnNumber: 15 } }, "Learn More")), imagePadding: false, image: /*#__PURE__*/_react["default"].createElement(_Image["default"], { height: "100%", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 209, columnNumber: 18 } }) } }, { it: 'should have no padding for image when imagePadding is set to false and size is tiny', props: { size: 'tiny', title: 'Check-in app by Wix', description: 'Download our app dedicated for helping you check-in guest and track your event right', actions: /*#__PURE__*/_react["default"].createElement(_Box["default"], { gap: 2, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 220, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "dark", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 221, columnNumber: 15 } }, "Get the App"), /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "light", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 224, columnNumber: 15 } }, "Learn More")), imagePadding: false, image: /*#__PURE__*/_react["default"].createElement(_Image["default"], { height: "100%", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 230, columnNumber: 18 } }) } }, { it: 'should have no padding for image when imagePadding is set to false and size is medium', props: { size: 'medium', title: 'Check-in app by Wix', description: 'Download our app dedicated for helping you check-in guest and track your event right', actions: /*#__PURE__*/_react["default"].createElement(_Box["default"], { gap: 2, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 241, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "dark", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 242, columnNumber: 15 } }, "Get the App"), /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "light", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 245, columnNumber: 15 } }, "Learn More")), imagePadding: false, image: /*#__PURE__*/_react["default"].createElement(_Image["default"], { height: "100%", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 251, columnNumber: 18 } }) } }, { it: 'should have image background fill the full height of layout', props: { title: 'Check-in app by Wix', description: 'Download our app dedicated for helping you check-in guest and track your event right', actions: /*#__PURE__*/_react["default"].createElement(_Box["default"], { gap: 2, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 261, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "dark", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 262, columnNumber: 15 } }, "Get the App"), /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "light", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 265, columnNumber: 15 } }, "Learn More")), imageBackgroundColor: 'blue', imagePadding: false, image: /*#__PURE__*/_react["default"].createElement(_Image["default"], { height: "50px", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 272, columnNumber: 18 } }) } }, { it: 'should have image background fill the full height of layout when badge exists and imagePadding is false', props: { title: 'Check-in app by Wix', badge: /*#__PURE__*/_react["default"].createElement(_Badge["default"], { size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 279, columnNumber: 18 } }, "Essential"), description: 'Download our app dedicated for helping you check-in guest and track your event right', actions: /*#__PURE__*/_react["default"].createElement(_Box["default"], { gap: 2, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 283, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "dark", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 284, columnNumber: 15 } }, "Get the App"), /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "light", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 287, columnNumber: 15 } }, "Learn More")), imageBackgroundColor: 'blue', imagePadding: false, image: /*#__PURE__*/_react["default"].createElement(_Image["default"], { height: "50px", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 294, columnNumber: 18 } }) } }, { it: 'should have image background fill the full height of layout when badge is hidden and imagePadding is false', props: { hiddenBadge: true, title: 'Check-in app by Wix', badge: /*#__PURE__*/_react["default"].createElement(_Badge["default"], { size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 302, columnNumber: 18 } }, "Essential"), description: 'Download our app dedicated for helping you check-in guest and track your event right', actions: /*#__PURE__*/_react["default"].createElement(_Box["default"], { gap: 2, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 306, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "dark", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 307, columnNumber: 15 } }, "Get the App"), /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "light", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 310, columnNumber: 15 } }, "Learn More")), imageBackgroundColor: 'blue', imagePadding: false, image: /*#__PURE__*/_react["default"].createElement(_Image["default"], { height: "50px", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 317, columnNumber: 18 } }) } }, { it: 'should not affect vertical layout image when imagePadding is set to true', props: { direction: 'vertical', title: 'I have imagePadding true', description: "Boost your site's SEO with the SEO Wiz. Follow your step-by-step plan.", actions: /*#__PURE__*/_react["default"].createElement(_Button["default"], { size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 327, columnNumber: 20 } }, "Start Now"), size: 'tiny', badge: /*#__PURE__*/_react["default"].createElement(_Badge["default"], { size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 329, columnNumber: 18 } }, "Essential"), imagePadding: true, image: /*#__PURE__*/_react["default"].createElement(_Box["default"], { width: "100%", align: "right", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 332, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_Image["default"], { width: "120px", src: "PromotionalPromoteMarketingHomeSEO.svg", transparent: true, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 333, columnNumber: 15 } })) } }, { it: 'should not affect vertical layout image when imagePadding is set to false', props: { direction: 'vertical', title: 'I have imagePadding false', description: "Boost your site's SEO with the SEO Wiz. Follow your step-by-step plan.", actions: /*#__PURE__*/_react["default"].createElement(_Button["default"], { size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 349, columnNumber: 20 } }, "Start Now"), size: 'tiny', badge: /*#__PURE__*/_react["default"].createElement(_Badge["default"], { size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 351, columnNumber: 18 } }, "Essential"), imagePadding: false, image: /*#__PURE__*/_react["default"].createElement(_Box["default"], { width: "100%", align: "right", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 354, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_Image["default"], { width: "120px", src: "PromotionalPromoteMarketingHomeSEO.svg", transparent: true, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 355, columnNumber: 15 } })) } }] }]; tests.forEach(function (_ref) { var describe = _ref.describe, its = _ref.its; its.forEach(function (_ref2) { var it = _ref2.it, props = _ref2.props; (0, _react2.storiesOf)("MarketingLayout".concat(describe ? '/' + describe : ''), module).add(it, function () { return /*#__PURE__*/_react["default"].createElement("div", { style: { height: '100%', backgroundColor: '#F0F4F7', padding: 20 }, __self: _this, __source: { fileName: _jsxFileName, lineNumber: 374, columnNumber: 11 } }, /*#__PURE__*/_react["default"].createElement("div", { style: { maxWidth: '1248px', margin: 'auto', backgroundColor: 'white' }, __self: _this, __source: { fileName: _jsxFileName, lineNumber: 377, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_MarketingLayout["default"], (0, _extends2["default"])({}, commonProps, props, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 384, columnNumber: 15 } })))); }); }); }); var cardTests = [{ describe: 'MarketingLayout in Card component', its: [{ it: 'should inherit border radius from the Card when imagePadding is set to false', props: { imagePadding: false, title: 'Check-in app by Wix', description: 'Download our app dedicated for helping you check-in guest and track your event right', actions: /*#__PURE__*/_react["default"].createElement(_Box["default"], { gap: 2, __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 405, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "dark", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 406, columnNumber: 15 } }, "Get the App"), /*#__PURE__*/_react["default"].createElement(_Button["default"], { skin: "light", size: "small", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 409, columnNumber: 15 } }, "Learn More")), imageBackgroundColor: 'blue', image: /*#__PURE__*/_react["default"].createElement(_Image["default"], { height: "100%", __self: void 0, __source: { fileName: _jsxFileName, lineNumber: 415, columnNumber: 18 } }) } }] }]; cardTests.forEach(function (_ref3) { var describe = _ref3.describe, its = _ref3.its; its.forEach(function (_ref4) { var it = _ref4.it, props = _ref4.props; (0, _react2.storiesOf)("MarketingLayout".concat(describe ? '/' + describe : ''), module).add(it, function () { return /*#__PURE__*/_react["default"].createElement("div", { style: { height: '100%', backgroundColor: '#F0F4F7', padding: 20 }, __self: _this, __source: { fileName: _jsxFileName, lineNumber: 428, columnNumber: 11 } }, /*#__PURE__*/_react["default"].createElement(_Card["default"], { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 431, columnNumber: 13 } }, /*#__PURE__*/_react["default"].createElement(_MarketingLayout["default"], (0, _extends2["default"])({}, commonProps, props, { __self: _this, __source: { fileName: _jsxFileName, lineNumber: 432, columnNumber: 15 } })))); }); }); });