@wix/design-system
Version:
@wix/design-system
555 lines (554 loc) • 16.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _dynamicStories = require("@wix/wix-storybook-utils/dynamic-stories");
var _MarketingPageLayout = require("../MarketingPageLayout");
var _constants = require("../constants");
var _ = require("../..");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/MarketingPageLayout/test/MarketingPageLayout.visual.jsx",
_this = void 0;
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var horizontalSizes = Object.values(_constants.horizontalSize);
var verticalSizes = Object.values(_constants.verticalSize);
var commonProps = {
content: /*#__PURE__*/_react["default"].createElement(_.MarketingPageLayoutContent, {
size: "medium",
overline: "Coming Soon",
title: "Medium Size Content",
content: /*#__PURE__*/_react["default"].createElement(_.Text, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement("ul", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement("li", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 13
}
}, "Brand your dashboard with a custom logo"), /*#__PURE__*/_react["default"].createElement("li", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 13
}
}, "Remove Wix ads and promotions"), /*#__PURE__*/_react["default"].createElement("li", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 13
}
}, "Promote your business when sharing in-progress work"))),
actions: /*#__PURE__*/_react["default"].createElement(_.Button, {
size: "large",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 16
}
}, "Contact Us"),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 5
}
}),
image: /*#__PURE__*/_react["default"].createElement(_.Image, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 10
}
})
};
var tests = [{
describe: 'sanity',
its: [{
it: 'default',
props: {}
}, {
it: 'no content',
props: {
content: ''
}
}, {
it: 'no image',
props: {
image: ''
}
}]
}, {
describe: 'footers',
its: [{
it: 'no footer',
props: {
footer: ''
}
}, {
it: 'TestimonialList footer',
props: {
footer: /*#__PURE__*/_react["default"].createElement(_.TestimonialList, {
testimonials: [{
id: '0001',
avatar: /*#__PURE__*/_react["default"].createElement(_.Avatar, {
name: "Guy in glasses",
size: "size60",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 27
}
}),
text: 'I love it! This product is exactly what I needed.',
authorName: 'Guy in glasses'
}, {
id: '0002',
avatar: /*#__PURE__*/_react["default"].createElement(_.Avatar, {
name: "Person with a hat",
size: "size60",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 27
}
}),
text: 'Amazing! It helped me to solve my problems.',
authorName: 'Person with a hat'
}, {
id: '0003',
avatar: /*#__PURE__*/_react["default"].createElement(_.Avatar, {
name: "Smiling lady",
size: "size60",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 27
}
}),
text: 'A perfect tool for my every day tasks.',
authorName: 'Smiling lady'
}],
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 13
}
})
}
}, {
it: 'FeatureList footer',
props: {
footer: /*#__PURE__*/_react["default"].createElement(_.FeatureList, {
features: [{
id: '0001',
image: /*#__PURE__*/_react["default"].createElement(_.Image, {
width: 60,
height: 60,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 26
}
}),
title: 'Remove Wix Ads',
text: "Enjoy a website that's completely your own brand by removing Wix ads."
}, {
id: '0002',
image: /*#__PURE__*/_react["default"].createElement(_.Image, {
width: 60,
height: 60,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 26
}
}),
title: 'Connect a Custom Domain',
text: 'Get your business found with a custom domain.'
}, {
id: '0003',
image: /*#__PURE__*/_react["default"].createElement(_.Image, {
width: 60,
height: 60,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 26
}
}),
title: 'Accept Online Payment',
text: 'Let your customers and clients pay you online at checkout.'
}],
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 13
}
})
}
}]
}, {
describe: 'layout',
its: [{
it: 'imageTop',
props: {
layout: 'imageTop',
content: /*#__PURE__*/_react["default"].createElement(_.MarketingPageLayoutContent, {
title: "Reach the right audience across Google",
subtitle: "Bring in local traffic using Google My Business.",
content: /*#__PURE__*/_react["default"].createElement(_.Text, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 17
}
}, /*#__PURE__*/_react["default"].createElement("ul", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 19
}
}, /*#__PURE__*/_react["default"].createElement("li", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 21
}
}, "Brand your dashboard with a custom logo"), /*#__PURE__*/_react["default"].createElement("li", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 21
}
}, "Remove Wix ads and promotions"), /*#__PURE__*/_react["default"].createElement("li", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 21
}
}, "Promote your business when sharing in-progress work"))),
actions: /*#__PURE__*/_react["default"].createElement(_.Button, {
size: "large",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 24
}
}, "Contact Us"),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 13
}
}),
image: /*#__PURE__*/_react["default"].createElement(_.Image, {
height: "300px",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 18
}
})
}
}, {
it: 'imageTop with footer',
props: {
layout: 'imageTop',
content: /*#__PURE__*/_react["default"].createElement(_.MarketingPageLayoutContent, {
title: "Reach the right audience across Google",
content: "Let customers earn and redeem points for rewards",
actions: /*#__PURE__*/_react["default"].createElement(_.Button, {
size: "large",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 24
}
}, "Contact Us"),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 13
}
}),
image: /*#__PURE__*/_react["default"].createElement(_.Image, {
height: "300px",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 18
}
}),
footer: /*#__PURE__*/_react["default"].createElement(_.Text, {
size: "tiny",
secondary: true,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 13
}
}, "Let customers earn and redeem points for rewards")
}
}, {
it: 'imageTop with arbitrary content',
props: {
layout: 'imageTop',
content: /*#__PURE__*/_react["default"].createElement(_.Text, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 180,
columnNumber: 20
}
}, "Arbitrary content below a full width image"),
image: /*#__PURE__*/_react["default"].createElement(_.Image, {
height: "300px",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 18
}
})
}
}, {
it: 'imageSideEnd with text footer',
props: {
footer: /*#__PURE__*/_react["default"].createElement(_.Text, {
size: "tiny",
secondary: true,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 188,
columnNumber: 13
}
}, "Let customers earn and redeem points for rewards")
}
}, {
it: 'imageSideEnd large content',
props: {
content: /*#__PURE__*/_react["default"].createElement(_.MarketingPageLayoutContent, {
overline: "Coming Soon",
title: "Reach the right audience across Google",
content: "Let customers earn and redeem points for rewards",
actions: /*#__PURE__*/_react["default"].createElement(_.Button, {
size: "large",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 24
}
}, "Contact Us"),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 13
}
})
}
}]
}, {
describe: 'horizontalSize',
its: horizontalSizes.map(function (horizontalSize) {
return {
it: horizontalSize,
props: {
horizontalSize: horizontalSize
}
};
})
}, {
describe: 'verticalSize',
its: verticalSizes.map(function (verticalSize) {
return {
it: verticalSize,
props: {
verticalSize: verticalSize
}
};
})
}, {
describe: 'removeImageHorizontalPadding',
its: [{
it: 'with removeImageHorizontalPadding',
props: {
removeImageHorizontalPadding: true
}
}, {
it: 'without removeImageHorizontalPadding',
props: {
removeImageHorizontalPadding: false
}
}]
}, {
describe: 'removeImageVerticalPadding',
its: [{
it: 'with removeImageVerticalPadding',
props: {
removeImageVerticalPadding: true
}
}, {
it: 'without removeImageVerticalPadding',
props: {
removeImageVerticalPadding: false
}
}]
}, {
describe: 'fullHeightImage',
its: [{
it: 'set to true',
props: _objectSpread(_objectSpread({}, commonProps), {}, {
height: '100vh',
fullHeightImage: true,
removeImageVerticalPadding: true,
removeImageHorizontalPadding: true,
image: /*#__PURE__*/_react["default"].createElement(_.Image, {
width: "100%",
height: "100%",
fit: "fill",
transparent: true,
src: "MarketingPageLayoutExample.svg",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 269,
columnNumber: 13
}
})
})
}]
}];
tests.forEach(function (_ref) {
var describe = _ref.describe,
its = _ref.its;
its.forEach(function (_ref2) {
var it = _ref2.it,
props = _ref2.props;
(0, _dynamicStories.storiesOf)("".concat(_MarketingPageLayout.MarketingPageLayout.displayName).concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/_react["default"].createElement(_MarketingPageLayout.MarketingPageLayout, (0, _extends2["default"])({}, commonProps, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 288,
columnNumber: 21
}
}));
});
});
});
var mobileTests = [{
describe: 'mobile',
its: [{
it: 'stacked',
props: {}
}, {
it: 'imageTop stacked',
props: {
layout: 'imageTop'
}
}, {
it: 'stacked with footer',
props: {
footer: /*#__PURE__*/_react["default"].createElement(_.FeatureList, {
features: [{
id: '0001',
image: /*#__PURE__*/_react["default"].createElement(_.Image, {
width: 60,
height: 60,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 314,
columnNumber: 26
}
}),
title: 'Remove Wix Ads',
text: "Enjoy a website that's completely your own brand by removing Wix ads."
}],
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 310,
columnNumber: 13
}
})
}
}]
}];
mobileTests.forEach(function (_ref3) {
var describe = _ref3.describe,
its = _ref3.its;
its.forEach(function (_ref4) {
var it = _ref4.it,
props = _ref4.props;
(0, _dynamicStories.storiesOf)("".concat(_MarketingPageLayout.MarketingPageLayout.displayName).concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/_react["default"].createElement(_.WixDesignSystemProvider, {
mobile: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 333,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: '375px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 334,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_MarketingPageLayout.MarketingPageLayout, (0, _extends2["default"])({}, commonProps, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 335,
columnNumber: 11
}
}))));
});
});
});