Extract a supplementary card into read-side/html-pages/shared-compone…

…nts #3229

src/read-side/html-pages/groups-page/render-groups.ts

@@ -1,9 +1,9 @@
 import { pipe } from 'fp-ts/function';
 import { renderListItems } from '../../../shared-components/render-list-items';
-import { supplementaryCard } from '../../../shared-components/supplementary-card';
 import { supplementaryInfo } from '../../../shared-components/supplementary-info';
 import { HtmlFragment, toHtmlFragment } from '../../../types/html-fragment';
 import { renderListOfCards } from '../shared-components/list-of-cards';
+import { supplementaryCard } from '../shared-components/supplementary-card';
 
 const supplementaryItems = [
   supplementaryCard(

src/read-side/html-pages/sciety-feed-page/render-as-html/render-page.ts

@@ -3,11 +3,11 @@ import * as RA from 'fp-ts/ReadonlyArray';
 import { pipe } from 'fp-ts/function';
 import { renderScietyFeedCard } from './render-sciety-feed-card';
 import { renderListItems } from '../../../../shared-components/render-list-items';
-import { supplementaryCard } from '../../../../shared-components/supplementary-card';
 import { supplementaryInfo } from '../../../../shared-components/supplementary-info';
 import { HtmlFragment, toHtmlFragment } from '../../../../types/html-fragment';
 import { renderListOfCards } from '../../shared-components/list-of-cards';
 import { renderLegacyPaginationControls } from '../../shared-components/pagination';
+import { supplementaryCard } from '../../shared-components/supplementary-card';
 import { ViewModel } from '../view-model';
 
 const supplementaryItems = [

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

@@ -9,4 +9,5 @@
 @use 'site-footer';
 @use 'site-header';
 @use 'standard-page-layout';
+@use 'supplementary-card';
 @use 'tabs';

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

@@ -0,0 +1,14 @@
+@use 'button';
+@use 'card';
+
+.supplementary-card {
+  @include card.basics();
+}
+
+.supplementary-card__title {
+  @include card.title();
+}
+
+.supplementary-card__button_link {
+  @include button.primary-link();
+}

src/read-side/html-pages/shared-components/supplementary-card/index.ts

@@ -0,0 +1 @@
+export { supplementaryCard } from './supplementary-card';

src/shared-components/supplementary-card.ts → src/read-side/html-pages/shared-components/supplementary-card/supplementary-card.ts

@@ -1,4 +1,4 @@
-import { HtmlFragment, toHtmlFragment } from '../types/html-fragment';
+import { HtmlFragment, toHtmlFragment } from '../../../../types/html-fragment';
 
 export const supplementaryCard = (title: string, content: HtmlFragment): HtmlFragment => toHtmlFragment(`
   <article class="supplementary-card">

src/sass/_supplementary.scss

@@ -1,7 +1,5 @@
 @use 'layout';
 @use 'card';
-@use 'states';
-@use 'button';
 
 .supplementary-info {
   @include layout.allow-edge-to-edge-content-when-narrow();
@@ -15,15 +13,3 @@
 .supplementary-list__item {
   @include card.list-item();
 }
-
-.supplementary-card {
-  @include card.basics();
-}
-
-.supplementary-card__title {
-  @include card.title();
-}
-
-.supplementary-card__button_link {
-  @include button.primary-link();
-}