@wix/design-system/dist/esm/FloatingHelper/FloatingHelperContent/test/FloatingHelperContent.visual.js

@wix/design-system

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/FloatingHelper/FloatingHelperContent/test/FloatingHelperContent.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 { storiesOf } from '@storybook/react';
import FloatingHelperContent from '../FloatingHelperContent';
import Box from '../../../Box';
import Text from '../../../Text';
import { actionButtonSkin } from '../constants';
import { floatingHelperSkin } from '../../constants';
import { Image } from '@wix/wix-ui-icons-common';
var title = 'Don’t forget to setup payments';
var body = 'In order to sell your music you need to choose a payment method. ';
var action = {
  actionText: 'Ok, Take Me There',
  onActionClick: function onActionClick() {
    return null;
  }
};
var image = /*#__PURE__*/React.createElement(Image, {
  style: {
    color: 'white'
  },
  width: "102",
  height: "102",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 14,
    columnNumber: 15
  }
});
var footer = /*#__PURE__*/React.createElement(Box, {
  align: "center",
  verticalAlign: "middle",
  backgroundColor: "D10",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 16,
    columnNumber: 3
  }
}, /*#__PURE__*/React.createElement(Text, {
  light: true,
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 17,
    columnNumber: 5
  }
}, "This is a footer with a dark background"));
var actionButtonSkins = Object.values(actionButtonSkin);
var skins = Object.values(floatingHelperSkin);
var defaultProps = {
  actionTheme: actionButtonSkin.white,
  appearance: floatingHelperSkin.dark
};
var requiredProps = {
  body: body
};
var tests = [{
  describe: 'sanity',
  its: [{
    it: 'default',
    props: {}
  }]
}, {
  describe: 'title',
  its: [{
    it: 'enabled',
    props: {
      title: title
    }
  }, {
    it: 'with action',
    props: _objectSpread({
      title: title
    }, action)
  }]
}, {
  describe: 'action button',
  its: [{
    it: 'default',
    props: _objectSpread({
      title: title
    }, action)
  }]
}, {
  describe: 'action button',
  its: actionButtonSkins.map(function (actionTheme) {
    return {
      it: "".concat(actionTheme),
      props: _objectSpread(_objectSpread({
        title: title
      }, action), {}, {
        actionTheme: actionTheme
      })
    };
  })
}, {
  describe: 'actionSkin',
  its: [{
    it: 'overrides actionTheme',
    props: _objectSpread(_objectSpread({
      title: title
    }, action), {}, {
      actionTheme: 'premium',
      actionSkin: 'lightPrimary'
    })
  }]
}, {
  describe: 'image',
  its: [{
    it: 'enabled',
    props: {
      image: image
    }
  }, {
    it: 'with title & action',
    props: _objectSpread(_objectSpread({
      title: title
    }, action), {}, {
      image: image
    })
  }]
}, {
  describe: 'appearance',
  its: skins.map(function (appearance) {
    return {
      it: "".concat(appearance),
      props: {
        appearance: appearance
      }
    };
  })
}, {
  describe: 'skin',
  its: skins.map(function (skin) {
    return {
      it: "".concat(skin),
      props: {
        skin: skin
      }
    };
  })
}, {
  describe: 'footer',
  its: [{
    it: 'enabled',
    props: {
      footer: footer
    }
  }, {
    it: 'with title, action & image',
    props: _objectSpread(_objectSpread({
      footer: footer,
      title: title
    }, action), {}, {
      image: image
    })
  }]
}, {
  describe: 'direction',
  its: [{
    it: 'vertical',
    props: {
      direction: 'vertical',
      image: image
    }
  }]
}];
tests.forEach(function (_ref) {
  var describe = _ref.describe,
    its = _ref.its;
  its.forEach(function (_ref2) {
    var it = _ref2.it,
      props = _ref2.props;
    storiesOf("FloatingHelperContent".concat(describe ? '/' + describe : ''), module).add(it, function () {
      return /*#__PURE__*/React.createElement("div", {
        style: {
          padding: '20px',
          display: 'inline-block',
          backgroundColor: (props.skin || props.appearance) === 'light' ? '#ffffff' : '#162d3d'
        },
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 128,
          columnNumber: 7
        }
      }, /*#__PURE__*/React.createElement(FloatingHelperContent, _extends({}, defaultProps, requiredProps, props, {
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 138,
          columnNumber: 9
        }
      })));
    });
  });
});