@wix/design-system
Version:
@wix/design-system
854 lines • 24.3 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/MarketingLayout/test/MarketingLayout.visual.jsx",
_this = this;
import React from 'react';
import { storiesOf } from '@storybook/react';
import MarketingLayout from '../MarketingLayout';
import Button from '../../Button';
import Box from '../../Box';
import Badge from '../../Badge';
import Image from '../../Image';
import Card from '../../Card';
import { SIZES, DIRECTIONS } from '../constants';
var customImageNode = /*#__PURE__*/React.createElement(Box, {
backgroundColor: "R00",
width: "100%",
height: "200px",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 3
}
});
var customImageStaticSize = /*#__PURE__*/React.createElement(Box, {
backgroundColor: "R00",
width: "200px",
height: "200px",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 3
}
});
var customImageUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACDVBMVEUAAADrJxTnHxjnHhjmHxnmHhnmHRnmHhnmHhnmHhnmHhnnHhjlHhrmHxrlHhrkIBv/AADpIRbmHhnmHhnmHhnmHhnnHxjoHhf/AADnHBjmHRnmHhnmHRrkGxvlHxrmHhnmHhnnHhjuIhHnHhjmHhnmHhnnHhjmHhnlHxrmHhnmHxnnHhj/AADlHhrlHhrmHhnlHhnkHhvmHhnmHhnmHhnnHxjmIRnnHRjmHxr/MwDtJBLmHhnlHhrmHhnmHxroHBfmHhnlHRrmHhnlHhroIxfmHxnmGhrlHxrmHhrmHRnmHhnkGxvnHRjmHhnlHhrmHhnmHxnmHhnmHhnmHhnmHRnmHhrmHxnmHhnmHRnmHhnmHhnmHRrnHhjlHhrmHhr/AADjHBzmHhnmHxnnHhjqFRXmHhnnHhjlHhnoFxfmHhnfICDnHhjmGhrlHRrmHRnlHhrmHhrmHhnpHRblHxrmHhnmHhnlGhrmHxnmHhnmHhnmHxnnJBjnKhfnLhjoMxboNRboNhfoOBboNxboNhbnNBfnMBfnLRfnKBfmIRnlHhnnJhjnLBjmIhnlHxnnKxfnMhfmJRjnKhjnNhfoMxfmIxnmJBnnLhfnKBjnIxjnLxfnJxjnKRjmIRjoLRfoNBboLhfmJBjnLBfmJxjnLRjnMRfnKxjnIhjmHhjnMxfoMRfmIBnoNRfoNBfoMhb///9p1h4fAAAAeXRSTlMADUp+pszh7v3269u9lm0wAhdwxfvsp0wENq7pghMxu/OID5L85FbfbPnZKgGAO5n2Q4fyM2sfNcgFDt6KkTItylfUTRavFGP6pegcauKB746b9917vluXNM3tjKhF5gMloynlDNex9QvEELIKx4NE0qQjYufOHY2Y8+Dx6AAAAAFiS0dErrlrk6cAAAAHdElNRQflAxkOOjNwC9AxAAACzElEQVRIx53X+VcSQQAH8PFKsjRTyhIvCi3SMtJMzQ4zK8vMysw0pbS77L6+YOBwHy7iBR5oaYlm9T+2HjwBOXb2+xvv8XmzO29m5zuEREpCYlJyyrZUyfa0HTvTM3ZlEoHZnZUtRUj27M3ZJwDuz+WdRjvwTacfpAajyWyx2ngty8uPAwsKAbvDbKQh0TuHgCJ5Qgx44KACnCvMrWfYDRSXRH/WQ+BGRmmUjI0DyVEGPqzEhI7GiIfDkdIIsOwo4KWxY5pE6rGtshz2KRovhmkcV4XTE9CYafwYvKioDJUnYRci+UxDVhUsTykxRQXGgeqaTVl7GiNCJTXaULdJz2CCCo+OU5wNyHNSzsRA6QzOB/ZSIcPjrk2zD/Ub6w/cKBOlHlxYHzYXLsoYHxpW5UWp3chKLWhcpVlwsEpq5JSXeJoNMzOlblzmv2BXNAZ2OosmQhKhZZd0DlfLSBIGRFBqwzWSjO9i6A+oSAqGxVAvmsl16MVQF1rIDYyKofNoJVIYxFAPbpJb4ugs0kmauHd1Qk5uwyRumtrIHTFLmNIFtJO7+CmGTqKDZMAqQho0klpSAJsI+gv3CMnsFDPFi+jit/p9ONmpH908bcAQs9ShR83TGhn73rGuPS8heXAzSv2S4sEazS/CGBudwcONg0OOcSa5rJH2BmpdMTwsVMvv1UBKwHLUzaMvqAM1wS941/7mJN1BheDRYzgEWtMK8kJqSGln3NK0nj82PFGHlbynmBYg/9pQ/Sy8OKkq4BiM+54reP5ia9OrlMEXZ0Va7Hj5KlK9rOqHfSbGKb2sheS1OnI1ralTwBdtcehnNOh7E6OE9wM+S4SRddYlSFtj1XCSWf8W4Nyzc8HfoX+LfkDxrjfetaEsp1HJXxNW3F7XvMfiHFjwa/ifPV3vBd1W8j80fQy6qkg+dXWrifB8VjW3fCn/Km9r76iN8pf/g7wZWBEjYtYAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDMtMjVUMTQ6NTg6NTErMDA6MDDHJqvMAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAzLTI1VDE0OjU4OjUxKzAwOjAwtnsTcAAAAABJRU5ErkJggg==';
var sizes = Object.values(SIZES);
var directions = Object.values(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.createElement(Button, {
size: "small",
__self: this,
__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.createElement(Badge, {
size: "small",
__self: this,
__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.createElement(Box, {
gap: 2,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Button, {
skin: "dark",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 15
}
}, "Get the App"), /*#__PURE__*/React.createElement(Button, {
skin: "light",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 15
}
}, "Learn More")),
image: /*#__PURE__*/React.createElement(Image, {
height: "100%",
__self: this,
__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.createElement(Box, {
gap: 2,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Button, {
skin: "dark",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 15
}
}, "Get the App"), /*#__PURE__*/React.createElement(Button, {
skin: "light",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 15
}
}, "Learn More")),
imagePadding: false,
image: /*#__PURE__*/React.createElement(Image, {
height: "100%",
__self: this,
__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.createElement(Box, {
gap: 2,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Button, {
skin: "dark",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 15
}
}, "Get the App"), /*#__PURE__*/React.createElement(Button, {
skin: "light",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 15
}
}, "Learn More")),
imagePadding: false,
image: /*#__PURE__*/React.createElement(Image, {
height: "100%",
__self: this,
__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.createElement(Box, {
gap: 2,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 220,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Button, {
skin: "dark",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 15
}
}, "Get the App"), /*#__PURE__*/React.createElement(Button, {
skin: "light",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 224,
columnNumber: 15
}
}, "Learn More")),
imagePadding: false,
image: /*#__PURE__*/React.createElement(Image, {
height: "100%",
__self: this,
__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.createElement(Box, {
gap: 2,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Button, {
skin: "dark",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 15
}
}, "Get the App"), /*#__PURE__*/React.createElement(Button, {
skin: "light",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 15
}
}, "Learn More")),
imagePadding: false,
image: /*#__PURE__*/React.createElement(Image, {
height: "100%",
__self: this,
__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.createElement(Box, {
gap: 2,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Button, {
skin: "dark",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 15
}
}, "Get the App"), /*#__PURE__*/React.createElement(Button, {
skin: "light",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 265,
columnNumber: 15
}
}, "Learn More")),
imageBackgroundColor: 'blue',
imagePadding: false,
image: /*#__PURE__*/React.createElement(Image, {
height: "50px",
__self: this,
__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.createElement(Badge, {
size: "small",
__self: this,
__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.createElement(Box, {
gap: 2,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 283,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Button, {
skin: "dark",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 15
}
}, "Get the App"), /*#__PURE__*/React.createElement(Button, {
skin: "light",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 287,
columnNumber: 15
}
}, "Learn More")),
imageBackgroundColor: 'blue',
imagePadding: false,
image: /*#__PURE__*/React.createElement(Image, {
height: "50px",
__self: this,
__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.createElement(Badge, {
size: "small",
__self: this,
__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.createElement(Box, {
gap: 2,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 306,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Button, {
skin: "dark",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 307,
columnNumber: 15
}
}, "Get the App"), /*#__PURE__*/React.createElement(Button, {
skin: "light",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 310,
columnNumber: 15
}
}, "Learn More")),
imageBackgroundColor: 'blue',
imagePadding: false,
image: /*#__PURE__*/React.createElement(Image, {
height: "50px",
__self: this,
__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.createElement(Button, {
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 327,
columnNumber: 20
}
}, "Start Now"),
size: 'tiny',
badge: /*#__PURE__*/React.createElement(Badge, {
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 329,
columnNumber: 18
}
}, "Essential"),
imagePadding: true,
image: /*#__PURE__*/React.createElement(Box, {
width: "100%",
align: "right",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 332,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Image, {
width: "120px",
src: "PromotionalPromoteMarketingHomeSEO.svg",
transparent: true,
__self: this,
__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.createElement(Button, {
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 349,
columnNumber: 20
}
}, "Start Now"),
size: 'tiny',
badge: /*#__PURE__*/React.createElement(Badge, {
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 351,
columnNumber: 18
}
}, "Essential"),
imagePadding: false,
image: /*#__PURE__*/React.createElement(Box, {
width: "100%",
align: "right",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 354,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Image, {
width: "120px",
src: "PromotionalPromoteMarketingHomeSEO.svg",
transparent: true,
__self: this,
__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;
storiesOf("MarketingLayout".concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/React.createElement("div", {
style: {
height: '100%',
backgroundColor: '#F0F4F7',
padding: 20
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 374,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement("div", {
style: {
maxWidth: '1248px',
margin: 'auto',
backgroundColor: 'white'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 377,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(MarketingLayout, _extends({}, 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.createElement(Box, {
gap: 2,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 405,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(Button, {
skin: "dark",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 406,
columnNumber: 15
}
}, "Get the App"), /*#__PURE__*/React.createElement(Button, {
skin: "light",
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 409,
columnNumber: 15
}
}, "Learn More")),
imageBackgroundColor: 'blue',
image: /*#__PURE__*/React.createElement(Image, {
height: "100%",
__self: this,
__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;
storiesOf("MarketingLayout".concat(describe ? '/' + describe : ''), module).add(it, function () {
return /*#__PURE__*/React.createElement("div", {
style: {
height: '100%',
backgroundColor: '#F0F4F7',
padding: 20
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 428,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(Card, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 431,
columnNumber: 13
}
}, /*#__PURE__*/React.createElement(MarketingLayout, _extends({}, commonProps, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 432,
columnNumber: 15
}
}))));
});
});
});