creevey/lib/client/shared/components/ImagesView/ImagesView.js

Cross-browser screenshot testing tool for Storybook with fancy UI Runner

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getBorderColor = getBorderColor;
exports.ImagesView = ImagesView;
exports.themeBorderColors = void 0;

var _react = _interopRequireDefault(require("react"));

var _SideBySideView = require("./SideBySideView");

var _SwapView = require("./SwapView");

var _SlideView = require("./SlideView");

var _BlendView = require("./BlendView");

var _theming = require("@storybook/theming");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var themeBorderColors = {
  actual: 'negative',
  expect: 'positive',
  diff: 'secondary'
};
exports.themeBorderColors = themeBorderColors;

var isColor = function isColor(theme, color) {
  return color in theme.color;
};

function getBorderColor(theme, color) {
  return isColor(theme, color) ? theme.color[color] : color;
}

var views = {
  'side-by-side': _SideBySideView.SideBySideView,
  swap: _SwapView.SwapView,
  slide: _SlideView.SlideView,
  blend: _BlendView.BlendView
};

var Container = _theming.styled.div({
  height: '100%',
  display: 'flex',
  textAlign: 'center',
  alignItems: 'center',
  justifyContent: 'center',
  padding: '0 20px'
});

var ImageLink = _theming.styled.a({
  lineHeight: 0
});

var ActualImage = (0, _theming.withTheme)(_theming.styled.img(function (_ref) {
  var theme = _ref.theme;
  return {
    border: "1px solid ".concat(getBorderColor(theme, themeBorderColors.expect)),
    maxWidth: '100%'
  };
}));

function ImagesView(_ref2) {
  var url = _ref2.url,
      image = _ref2.image,
      canApprove = _ref2.canApprove,
      mode = _ref2.mode;
  var ViewComponent = views[mode];
  var actual = image.actual,
      diff = image.diff,
      expect = image.expect;
  return /*#__PURE__*/_react.default.createElement(Container, null, canApprove && diff && expect ? /*#__PURE__*/_react.default.createElement(ViewComponent, {
    actual: "".concat(url, "/").concat(actual),
    diff: "".concat(url, "/").concat(diff),
    expect: "".concat(url, "/").concat(expect)
  }) : /*#__PURE__*/_react.default.createElement(ImageLink, {
    href: "".concat(url, "/").concat(actual),
    target: "_blank",
    rel: "noopener noreferrer"
  }, /*#__PURE__*/_react.default.createElement(ActualImage, {
    alt: "actual",
    src: "".concat(url, "/").concat(actual)
  })));
}