Extract common code to an article-list shared component

src/read-side/html-pages/group-page/group-home-page/render-as-html/render-list-of-article-cards-with-fallback.ts

@@ -3,6 +3,7 @@ import * as RA from 'fp-ts/ReadonlyArray';
 import { pipe } from 'fp-ts/function';
 import { renderListItems } from '../../../../../shared-components/render-list-items';
 import { HtmlFragment, toHtmlFragment } from '../../../../../types/html-fragment';
+import { renderArticleList } from '../../../shared-components/article-list';
 import { PaginationControlsViewModel, renderPaginationControls } from '../../../shared-components/pagination';
 import { renderPaperActivitySummaryCard } from '../../../shared-components/paper-activity-summary-card';
 import { renderErrorAsHtml } from '../../../shared-components/paper-activity-summary-card/render-error-as-html';
@@ -18,9 +19,7 @@ const renderCards = (
   (listContent) => `
     <section class="group-page-feed">
       <h2>Latest preprint reviews</h2>
-      <ol class="article-list" role="list">
-        ${listContent}
-      </ol>
+      ${renderArticleList(listContent)}
     </section>
     ${renderPaginationControls(paginationControlsViewModel)}
   `,

src/read-side/html-pages/list-page/render-as-html/render-articles-list.ts

@@ -6,6 +6,7 @@ import { HtmlFragment, toHtmlFragment } from '../../../../types/html-fragment';
 import {
   ArticleCardWithControlsAndAnnotationViewModel, renderArticleCardWithControlsAndAnnotation,
 } from '../../shared-components/article-card-with-controls-and-annotation';
+import { renderArticleList } from '../../shared-components/article-list';
 import {
   PaperActivityErrorCardViewModel, renderPaperActivityErrorCard,
 } from '../../shared-components/paper-activity-summary-card';
@@ -24,6 +25,6 @@ export const renderArticlesList: RenderArticlesList = (articles) => pipe(
     (articleCard) => renderArticleCardWithControlsAndAnnotation(articleCard),
   )),
   (listItems) => renderListItems(listItems),
-  (list) => `<ol class="article-list" role="list">${list}</ol>`,
+  (list) => renderArticleList(list),
   toHtmlFragment,
 );

src/read-side/html-pages/paper-activity-page/render-as-html/render-related-articles.ts

@@ -3,6 +3,7 @@ import * as RA from 'fp-ts/ReadonlyArray';
 import { pipe } from 'fp-ts/function';
 import { renderListItems } from '../../../../shared-components/render-list-items';
 import { HtmlFragment, toHtmlFragment } from '../../../../types/html-fragment';
+import { renderArticleList } from '../../shared-components/article-list';
 import { renderAsHtml } from '../../shared-components/paper-activity-summary-card/render-as-html';
 import { ViewModel } from '../view-model';
 
@@ -17,9 +18,7 @@ export const renderRelatedArticles = (viewmodel: ViewModel): HtmlFragment => pip
       (listContent) => `
   <div id="relatedArticles">
     <h2 class="related-articles__header">Related articles</h2>
-    <ol class="article-list" role="list">
-      ${listContent}
-    </ol>
+    ${renderArticleList(listContent)}
   </div>
 `,
     ),

src/read-side/html-pages/search-results-page/render-as-html/render-search-results-list.ts

@@ -3,16 +3,13 @@ import * as RNEA from 'fp-ts/ReadonlyNonEmptyArray';
 import { pipe } from 'fp-ts/function';
 import { renderListItems } from '../../../../shared-components/render-list-items';
 import { HtmlFragment, toHtmlFragment } from '../../../../types/html-fragment';
+import { renderArticleList } from '../../shared-components/article-list';
 
 export const renderSearchResultsList = (cards: ReadonlyArray<HtmlFragment>): O.Option<HtmlFragment> => pipe(
   cards,
   RNEA.fromReadonlyArray,
   O.map(
-    (a) => `
-      <ol class="article-list" role="list">
-        ${renderListItems(a)}
-      </ol>
-    `,
+    (a) => renderArticleList(renderListItems(a)),
   ),
   O.map(toHtmlFragment),
 );

src/read-side/html-pages/shared-components/_index.scss

@@ -1,4 +1,5 @@
 @use 'article-card-with-controls-and-annotation';
+@use 'article-list';
 @use 'group-card';
 @use 'group-link';
 @use 'list-card';

src/read-side/html-pages/_list-rules.scss → src/read-side/html-pages/shared-components/article-list/_index.scss

@@ -1,4 +1,4 @@
-@use '../../sass/list';
+@use '../../../../sass/list';
 
 .article-list {
   @include list.basics();

src/read-side/html-pages/shared-components/article-list/index.ts

@@ -0,0 +1 @@
+export { renderArticleList } from './render-article-list';

src/read-side/html-pages/shared-components/article-list/render-article-list.ts

@@ -0,0 +1,7 @@
+import { HtmlFragment, toHtmlFragment } from '../../../../types/html-fragment';
+
+export const renderArticleList = (listContent: HtmlFragment): HtmlFragment => toHtmlFragment(`
+  <ol class="article-list" role="list">
+    ${listContent}
+  </ol>
+`);

src/read-side/html-pages/style.scss

@@ -5,7 +5,6 @@
 @use 'shared-components';
 @use 'form-rules';
 @use 'layout-rules';
-@use 'list-rules';
 @use 'page-header';
 @use 'about-page';
 @use 'paper-activity-page/render-as-html';