@catho/quantum/Carousel/sub-components/DescriptionCard.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 cardMeasures = {
  medium: {
    height: 240,
    thumbMargin: 0
  },
  large: {
    height: 264,
    thumbMargin: _theme.spacing.xsmall
  }
};
var AdaptedCard = (0, _styledComponents["default"])(_Card["default"]).withConfig({
  displayName: "DescriptionCard__AdaptedCard",
  componentId: "sc-1r1t1ds-0"
})(["", ";text-align:center;width:224px;", ""], function (_ref) {
  var _ref$theme$spacing = _ref.theme.spacing,
    xxxsmall = _ref$theme$spacing.xxxsmall,
    xsmall = _ref$theme$spacing.xsmall;
  return "\n    margin: ".concat(xxxsmall, "px ").concat(xsmall, "px;\n  ");
}, function (_ref2) {
  var height = _ref2.cardMeasure.height;
  return "height: ".concat(height, "px;");
});
var Content = (0, _styledComponents["default"])(_Card["default"].Content).withConfig({
  displayName: "DescriptionCard__Content",
  componentId: "sc-1r1t1ds-1"
})(["height:100%;", ";box-sizing:border-box;"], function (_ref3) {
  var medium = _ref3.theme.spacing.medium;
  return "\n    padding: ".concat(medium, "px;\n  ");
});
var Media = (0, _styledComponents["default"])(_Card["default"].Media).withConfig({
  displayName: "DescriptionCard__Media",
  componentId: "sc-1r1t1ds-2"
})(["width:192px;height:104px;padding-bottom:0;", ";"], function (_ref4) {
  var thumbMargin = _ref4.cardMeasure.thumbMargin;
  return "\n    margin-top: ".concat(thumbMargin, "px;\n    margin-bottom: ").concat(thumbMargin, "px;\n  ");
});
var Title = (0, _styledComponents["default"])(_Card["default"].Title).withConfig({
  displayName: "DescriptionCard__Title",
  componentId: "sc-1r1t1ds-3"
})(["", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], function (_ref5) {
  var _ref5$theme = _ref5.theme,
    baseFont = _ref5$theme.baseFontSize,
    medium = _ref5$theme.spacing.medium;
  return "\n    font-size: ".concat(baseFont, "px;\n    line-height: ").concat(baseFont, "px;\n    margin: ").concat(medium, "px;\n  ");
});
var Description = (0, _styledComponents["default"])(_Card["default"].Description).withConfig({
  displayName: "DescriptionCard__Description",
  componentId: "sc-1r1t1ds-4"
})(["", ";display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], function (_ref6) {
  var _ref6$theme = _ref6.theme,
    baseFont = _ref6$theme.baseFontSize,
    medium = _ref6$theme.spacing.medium;
  return "\n    font-size: ".concat(baseFont * 0.875, "px;\n    margin: 0 ").concat(medium, "px;\n  ");
});
Title.displayName = 'Title';
Description.displayName = 'Description';
var handleCardMeasures = function handleCardMeasures(cardSize) {
  return cardMeasures[cardSize];
};
function DescriptionCard(_ref7) {
  var card = _ref7.card,
    cardSize = _ref7.cardSize,
    _ref7$theme = _ref7.theme,
    theme = _ref7$theme === void 0 ? {
      colors: _theme.colors,
      spacing: _theme.spacing,
      baseFontSize: _theme.baseFontSize
    } : _ref7$theme;
  var cardMeasure = handleCardMeasures(cardSize);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AdaptedCard, {
    cardMeasure: cardMeasure,
    theme: theme,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Media, {
        cardMeasure: cardMeasure,
        src: card.imagePath,
        alt: card.imageDescription
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
        theme: theme,
        small: true,
        children: card.title
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Description, {
        theme: theme,
        children: card.description
      })]
    })
  });
}
DescriptionCard.propTypes = {
  card: _propTypes["default"].shape({
    imagePath: _propTypes["default"].string,
    imageDescription: _propTypes["default"].string,
    title: _propTypes["default"].string,
    description: _propTypes["default"].string
  }).isRequired,
  cardSize: _propTypes["default"].oneOf(['medium', 'large']).isRequired,
  theme: _propTypes["default"].shape({
    colors: _propTypes["default"].object,
    spacing: _propTypes["default"].object,
    baseFontSize: _propTypes["default"].number
  })
};
var _default = exports["default"] = DescriptionCard;