@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia/block-renderers/amp/amp-slideshow-block.js

## Introduction

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = AmpSlideshowBlockV2;

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _sharedStyle = require("../../shared-style");

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

const Wrapper = _styledComponents.default.figure`
  ${_sharedStyle.defaultMarginTop}
  ${_sharedStyle.defaultMarginBottom}
  position: relative;
  height: calc(58.75vw + 80px);
  ${({
  theme
}) => theme.breakpoint.md} {
    height: 508px;
  }

  .amp-carousel-button {
    position: absolute;
    top: calc(50% - 40px);
    z-index: 1;
    transform: translateY(-50%);
    color: white;
    height: calc(100% - 80px);
    width: 40px;
    background: none;
    &:focus {
      border: none;
      outline: none;
    }
    &::before {
      position: absolute;
      content: '';
      width: 16px;
      height: 16px;
      top: 50%;
      cursor: pointer;
      display: block;
    }
  }

  .amp-carousel-button-prev {
    left: 0;
    &::before {
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      left: 9px;
      transform: rotate(45deg) translate(0, -50%);
    }
  }

  .amp-carousel-button-next {
    right: 0;
    &::before {
      content: ' ';
      border-right: 2px solid #fff;
      border-top: 2px solid #fff;
      left: unset;
      transform: rotate(45deg) translate(-50%, 0);
      right: 9px;
    }
  }
`;
const SlideImage = _styledComponents.default.div`
  position: relative;
  object-position: center center;
  background-color: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 58.75vw;
  ${({
  theme
}) => theme.breakpoint.md} {
    height: 428px;
  }

  .contain img {
    object-fit: contain;
  }
`;
const Desc = _styledComponents.default.figcaption`
  font-size: 14px;
  line-height: 1.8;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 20px;
  min-height: 1.8rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  max-height: 60px;
  overflow: scroll;
`;

function AmpSlideshowBlockV2({
  entity
}) {
  const {
    images = [],
    delay = 2
  } = entity.getData();
  return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement("amp-carousel", {
    layout: "fill",
    type: "slides",
    autoplay: "",
    loop: "",
    delay: delay * 1000,
    "aria-label": "Carousel"
  }, images.map(slide => {
    var _slide$resized;

    return /*#__PURE__*/_react.default.createElement("figure", {
      key: slide.id
    }, /*#__PURE__*/_react.default.createElement(SlideImage, null, /*#__PURE__*/_react.default.createElement("amp-img", {
      class: "contain",
      src: slide === null || slide === void 0 ? void 0 : (_slide$resized = slide.resized) === null || _slide$resized === void 0 ? void 0 : _slide$resized.original,
      layout: "fill",
      alt: (slide === null || slide === void 0 ? void 0 : slide.name) || 'slide'
    })), /*#__PURE__*/_react.default.createElement(Desc, null, slide.desc));
  })));
}