@catho/quantum/Carousel/sub-components/ThumbCard.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Card = _interopRequireDefault(require("../../Card"));
var _theme = require("../../shared/theme");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var SQUARE_CARD_SIZE = 80;
var SQUARE_THUMB_SIZE = 64;
var AdaptedCard = (0, _styledComponents["default"])(_Card["default"]).withConfig({
  displayName: "ThumbCard__AdaptedCard",
  componentId: "sc-1lpdpoy-0"
})(["", ";text-align:center;height:", "px;width:", "px;"], function (_ref) {
  var _ref$theme$spacing = _ref.theme.spacing,
    xxxsmall = _ref$theme$spacing.xxxsmall,
    xxsmall = _ref$theme$spacing.xxsmall;
  return "\n    margin: ".concat(xxxsmall, "px ").concat(xxsmall, "px;\n  ");
}, SQUARE_CARD_SIZE, SQUARE_CARD_SIZE);
var Content = (0, _styledComponents["default"])(_Card["default"].Content).withConfig({
  displayName: "ThumbCard__Content",
  componentId: "sc-1lpdpoy-1"
})(["height:100%;", ";"], function (_ref2) {
  var xsmall = _ref2.theme.spacing.xsmall;
  return "\n    padding: ".concat(xsmall, "px;\n  ");
});
var Thumb = _styledComponents["default"].img.withConfig({
  displayName: "ThumbCard__Thumb",
  componentId: "sc-1lpdpoy-2"
})(["width:", "px;height:", "px;"], SQUARE_THUMB_SIZE, SQUARE_THUMB_SIZE);
var ThumbCard = function ThumbCard(_ref3) {
  var _ref3$card = _ref3.card,
    card = _ref3$card === void 0 ? {
      imagePath: 'http://',
      imageDescription: 'card image a11y description',
      title: 'card title',
      description: 'card description'
    } : _ref3$card,
    _ref3$theme = _ref3.theme,
    theme = _ref3$theme === void 0 ? {
      colors: _theme.colors,
      spacing: _theme.spacing,
      baseFontSize: _theme.baseFontSize
    } : _ref3$theme;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AdaptedCard, {
    theme: theme,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Thumb, {
        src: card.imagePath,
        alt: card.imageDescription
      })
    })
  });
};
ThumbCard.propTypes = {
  card: _propTypes["default"].shape({
    imagePath: _propTypes["default"].string,
    imageDescription: _propTypes["default"].string,
    title: _propTypes["default"].string,
    description: _propTypes["default"].string
  }),
  theme: _propTypes["default"].shape({
    colors: _propTypes["default"].object,
    spacing: _propTypes["default"].object,
    baseFontSize: _propTypes["default"].number
  })
};
var _default = exports["default"] = ThumbCard;