@wix/design-system
Version:
@wix/design-system
465 lines • 10.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Thumbnail/test/Thumbnail.visual.jsx",
_this = this;
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) { _defineProperty(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; }
import React from 'react';
import { visualize, snap, story } from 'storybook-snapper';
import Thumbnail from '../Thumbnail';
var title = 'Thumbnail title';
var description = 'Description about this thumbnail option goes here';
var image = 'example.jpg';
var backgroundImage = 'solid-yellow.jpg';
var squareSize = {
width: 200,
height: 200
};
var tests = [{
describe: 'Sizes',
its: [{
it: 'Tiny',
props: {
size: 'tiny',
title: title,
description: description,
image: image
}
}, {
it: 'Small',
props: {
size: 'small',
title: title,
description: description,
image: image
}
}, {
it: 'Medium',
props: {
size: 'medium',
title: title,
description: description,
image: image
}
}]
}, {
describe: 'No border',
its: [{
it: 'default',
props: {
border: false,
title: title,
description: description
}
}, {
it: 'selected',
props: {
border: false,
selected: true,
title: title,
description: description
}
}, {
it: 'disabled',
props: {
border: false,
disabled: true,
title: title,
description: description
}
}, {
it: 'disabled and selected',
props: {
border: false,
disabled: true,
selected: true,
title: title,
description: description
}
}]
}, {
describe: 'Basic',
its: [{
it: 'Title, description and image',
props: {
title: title,
description: description,
image: image
}
}, {
it: 'Selected',
props: {
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'Disabled',
props: {
disabled: true,
title: title,
description: description,
image: image
}
}, {
it: 'Selected and disabled',
props: {
disabled: true,
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'Hide selected icon',
props: {
hideSelectedIcon: true,
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'Width',
props: {
width: 250,
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'Height',
props: {
height: 400,
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'Content aligned to top',
props: {
height: 250,
contentAlignment: 'top',
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'Low height no padding',
props: {
height: 20,
size: 'tiny',
title: title,
noPadding: true
}
}]
}, {
describe: 'Text position outside',
its: [{
it: 'basic',
props: {
textPosition: 'outside',
title: title,
description: description,
image: image
}
}, {
it: 'Selected',
props: {
textPosition: 'outside',
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'Disabled',
props: {
textPosition: 'outside',
disabled: true,
title: title,
description: description,
image: image
}
}, {
it: 'Selected and disabled',
props: {
textPosition: 'outside',
disabled: true,
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'Hide selected icon',
props: {
textPosition: 'outside',
hideSelectedIcon: true,
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'Width and selected',
props: {
textPosition: 'outside',
width: 250,
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'Height and selected',
props: {
textPosition: 'outside',
height: 400,
selected: true,
title: title,
description: description,
image: image
}
}]
}, {
describe: 'Ellipsis',
its: [{
it: 'outside max lines 1',
props: {
textPosition: 'outside',
title: 'Thumbnail title that reaches out the boundaries of thumbnail component',
description: 'Thumbnail description that reaches out the boundaries of thumbnail component',
image: image,
ellipsis: true,
maxLines: 1
}
}, {
it: 'outside max lines 2',
props: {
textPosition: 'outside',
title: 'Thumbnail title that reaches out the boundaries of thumbnail component, a really long one, indeed',
description: 'Thumbnail description that reaches out the boundaries of thumbnail component',
image: image,
ellipsis: true,
maxLines: 2
}
}, {
it: 'inside max lines 1',
props: {
title: 'Thumbnail title that reaches out the boundaries of thumbnail component',
description: 'Thumbnail description that reaches out the boundaries of thumbnail component',
image: image,
ellipsis: true,
maxLines: 1
}
}]
}, {
describe: 'Background image',
its: [{
it: 'With long title',
props: _objectSpread(_objectSpread({
backgroundImage: backgroundImage
}, squareSize), {}, {
title: 'Thumbnail title that reaches out the boundaries of thumbnail component'
})
}, {
it: 'Selected',
props: _objectSpread(_objectSpread({
selected: true,
backgroundImage: backgroundImage
}, squareSize), {}, {
title: title
})
}, {
it: 'Disabled',
props: _objectSpread(_objectSpread({
disabled: true,
backgroundImage: backgroundImage
}, squareSize), {}, {
title: title
})
}]
}, {
describe: 'Custom children',
its: [{
it: 'With long title',
props: {
children: /*#__PURE__*/React.createElement("div", {
style: {
backgroundColor: 'rgba(255,0,11,0.6)',
padding: '15px'
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 340,
columnNumber: 13
}
}, "Custom element"),
title: 'Thumbnail title that reaches out the boundaries of thumbnail component'
}
}, {
it: 'Selected',
props: {
selected: true,
children: /*#__PURE__*/React.createElement("div", {
style: {
backgroundColor: 'rgba(255,0,11,0.6)',
padding: '15px'
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 355,
columnNumber: 13
}
}, "Custom element")
}
}, {
it: 'Disabled',
props: {
disabled: true,
children: /*#__PURE__*/React.createElement("div", {
style: {
backgroundColor: 'rgba(255,0,11,0.6)',
padding: '15px'
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 368,
columnNumber: 13
}
}, "Custom element")
}
}]
}, {
describe: 'Skin secondary',
its: [{
it: 'default',
props: {
skin: 'secondary',
title: title,
description: description,
image: image
}
}, {
it: 'selected',
props: {
skin: 'secondary',
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'disabled',
props: {
skin: 'secondary',
disabled: true,
title: title,
description: description,
image: image
}
}, {
it: 'selected and disabled',
props: {
skin: 'secondary',
selected: true,
disabled: true,
title: title,
description: description,
image: image
}
}]
}, {
describe: 'Skin secondary with text position outside',
its: [{
it: 'default',
props: {
skin: 'secondary',
textPosition: 'outside',
title: title,
description: description,
image: image
}
}, {
it: 'selected',
props: {
skin: 'secondary',
textPosition: 'outside',
selected: true,
title: title,
description: description,
image: image
}
}, {
it: 'disabled',
props: {
skin: 'secondary',
textPosition: 'outside',
disabled: true,
title: title,
description: description,
image: image
}
}, {
it: 'selected and disabled',
props: {
skin: 'secondary',
textPosition: 'outside',
selected: true,
disabled: true,
title: title,
description: description,
image: image
}
}, {
it: 'without image',
props: {
skin: 'secondary',
textPosition: 'outside',
height: 250,
title: title,
description: description
}
}]
}];
visualize("".concat(Thumbnail.displayName), function () {
tests.forEach(function (_ref) {
var describe = _ref.describe,
its = _ref.its;
story(describe, function () {
its.forEach(function (_ref2) {
var it = _ref2.it,
props = _ref2.props;
return snap(it, function () {
return /*#__PURE__*/React.createElement("div", {
style: {
width: '300px',
padding: '15px'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 489,
columnNumber: 11
}
}, /*#__PURE__*/React.createElement(Thumbnail, _extends({}, props, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 490,
columnNumber: 13
}
})));
});
});
});
});
});