mediawiki-extensions-RelatedArticles/resources/ext.relatedArticles.readMore/RelatedArticles.js

/* eslint-disable indent, quotes */
// eslint-disable-next-line spaced-comment
/// <reference path="./codex.ts" />

/**
 * @param {Object} options
 * @param {string} options.heading
 * @param {boolean} options.isContainerSmall
 * @param {Codex.ListTitleObject[]} options.cards
 * @return {string}
 */
const RelatedArticles = ( options ) => {
	return [
		`<div class="read-more-container ${ ( options.isContainerSmall ) ? 'read-more-container-small' : 'read-more-container-large' }">`,
			`<aside class="noprint">`,
				( options.heading ) ?
				`<h2 class="read-more-container-heading">${ options.heading }</h2>` : ``,
				`<ul class="read-more-container-card-list">`,
					options.cards.map( ( card ) => `<li title="${ card.label }">
					<a href="${ card.url }"><span class="cdx-card">
						<span class="cdx-card__thumbnail cdx-thumbnail">
						${ ( card.thumbnail && card.thumbnail.url ) ?
							`<span class="cdx-thumbnail__image" style="background-image: url('${ card.thumbnail.url }')"></span>` :
							`<span class="cdx-thumbnail__placeholder">
								<span class="cdx-thumbnail__placeholder__icon"></span>
							</span>` }
						</span>
						<span class="cdx-card__text">
							<span class="cdx-card__text__title">${ card.label }</span>
							<span class="cdx-card__text__description">${ card.description }</span>
						</span>
					</a>
				</li>` ).join( '\n' ),
				`</ul>`,
			`</aside>`,
		`</div>`
	].join( '\n' );
};

module.exports = RelatedArticles;