mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RelatedArticles
synced 2024-12-25 06:13:25 +00:00
833a84db4a
* eslint-config-wikimedia: 0.25.1 → 0.27.0 * @wikimedia/codex: 1.3.5 → 1.4.0 Change-Id: I2c36146322f92812c009ef26c6138068356aa053
41 lines
1.4 KiB
JavaScript
41 lines
1.4 KiB
JavaScript
/* 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;
|