Get all FeaturedCards to use the same component

wellcomecollection · Dec 12, 2024 · 7eeca84 · 7eeca84
1 parent 88bf8f5
commit 7eeca84
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 30 deletions.
diff --git a/content/webapp/components/FeaturedCard/index.tsx b/content/webapp/components/FeaturedCard/index.tsx
@@ -27,21 +27,35 @@ import {
   FeaturedCardWrap,
 } from './FeaturedCard.styles';
 
-type Props = PartialFeaturedCard & {
+type FeaturedCardProps = PartialFeaturedCard & {
   background: PaletteColor;
   textColor: PaletteColor;
   isReversed?: boolean;
 };
 
-const FeaturedCard: FunctionComponent<PropsWithChildren<Props>> = ({
-  image,
-  labels,
-  children,
-  link,
-  textColor,
-  background,
-  isReversed = false,
-}) => {
+type FeaturedCardArticleProps = {
+  article: Article;
+  background: PaletteColor;
+  textColor: PaletteColor;
+};
+
+type FeaturedCardExhibitionProps = {
+  exhibition: ExhibitionBasic;
+  background: PaletteColor;
+  textColor: PaletteColor;
+};
+
+const FeaturedCardBasic = props => {
+  const {
+    image,
+    labels,
+    children,
+    link,
+    textColor,
+    background,
+    isReversed = false,
+  } = props;
+
   return (
     <FeaturedCardWrap>
       <FeaturedCardLink href={link.url} $isReversed={isReversed}>
@@ -81,12 +95,6 @@ const FeaturedCard: FunctionComponent<PropsWithChildren<Props>> = ({
   );
 };
 
-type FeaturedCardArticleProps = {
-  article: Article;
-  background: PaletteColor;
-  textColor: PaletteColor;
-};
-
 export const FeaturedCardArticle: FunctionComponent<
   FeaturedCardArticleProps
 > = ({ article, background, textColor }) => {
@@ -102,7 +110,7 @@ export const FeaturedCardArticle: FunctionComponent<
   const labels = [{ text: article.format.label }];
 
   return (
-    <FeaturedCard
+    <FeaturedCardBasic
       image={image}
       link={link}
       labels={labels}
@@ -119,23 +127,17 @@ export const FeaturedCardArticle: FunctionComponent<
           </p>
         </Space>
       )}
-    </FeaturedCard>
+    </FeaturedCardBasic>
   );
 };
 
-type FeaturedCardExhibitionProps = {
-  exhibition: ExhibitionBasic;
-  background: PaletteColor;
-  textColor: PaletteColor;
-};
-
 export const FeaturedCardExhibition: FunctionComponent<
   FeaturedCardExhibitionProps
 > = ({ exhibition, background, textColor }) => {
   const props = convertItemToFeaturedCardProps(exhibition);
 
   return (
-    <FeaturedCard {...props} background={background} textColor={textColor}>
+    <FeaturedCardBasic {...props} background={background} textColor={textColor}>
       <div>
         <h3 className={font('wb', 2)}>{exhibition.title}</h3>
         {!exhibition.statusOverride && exhibition.start && exhibition.end && (
@@ -149,9 +151,37 @@ export const FeaturedCardExhibition: FunctionComponent<
           statusOverride={exhibition.statusOverride}
         />
       </div>
-    </FeaturedCard>
+    </FeaturedCardBasic>
   );
 };
 
+const FeaturedCard: FunctionComponent<
+  | PropsWithChildren<FeaturedCardProps & { type?: 'card' }>
+  | (FeaturedCardArticleProps & { type: 'article' })
+  | (FeaturedCardExhibitionProps & { type: 'exhibition' })
+> = props => {
+  if (props.type === 'article') {
+    return (
+      <FeaturedCardArticle
+        article={props.article}
+        background={props.background}
+        textColor={props.textColor}
+      />
+    );
+  }
+
+  if (props.type === 'exhibition') {
+    return (
+      <FeaturedCardExhibition
+        exhibition={props.exhibition}
+        background={props.background}
+        textColor={props.textColor}
+      />
+    );
+  }
+
+  return <FeaturedCardBasic {...props} />;
+};
+
 export default FeaturedCard;
 export { convertCardToFeaturedCardProps, convertItemToFeaturedCardProps };
diff --git a/content/webapp/pages/stories/index.tsx b/content/webapp/pages/stories/index.tsx
@@ -24,7 +24,7 @@ import Space from '@weco/common/views/components/styled/Space';
 import SpacingComponent from '@weco/common/views/components/styled/SpacingComponent';
 import SpacingSection from '@weco/common/views/components/styled/SpacingSection';
 import CardGrid from '@weco/content/components/CardGrid/CardGrid';
-import { FeaturedCardArticle } from '@weco/content/components/FeaturedCard';
+import FeaturedCard from '@weco/content/components/FeaturedCard';
 import FeaturedText from '@weco/content/components/FeaturedText/FeaturedText';
 import { defaultSerializer } from '@weco/content/components/HTMLSerializers/HTMLSerializers';
 import SectionHeader from '@weco/content/components/SectionHeader/SectionHeader';
@@ -203,7 +203,8 @@ const StoriesPage: FunctionComponent<Props> = ({
         <ArticlesContainer className="row--has-wobbly-background">
           <Space $v={{ size: 'xl', properties: ['margin-bottom'] }}>
             <ContaineredLayout gridSizes={gridSize12()}>
-              <FeaturedCardArticle
+              <FeaturedCard
+                type="article"
                 article={firstArticle}
                 background="neutral.700"
                 textColor="white"

diff --git a/content/webapp/pages/whats-on/index.tsx b/content/webapp/pages/whats-on/index.tsx
@@ -51,7 +51,7 @@ import CardGrid from '@weco/content/components/CardGrid/CardGrid';
 import EventsByMonth from '@weco/content/components/EventsByMonth/EventsByMonth';
 import ExhibitionsAndEvents from '@weco/content/components/ExhibitionsAndEvents/ExhibitionsAndEvents';
 import FacilityPromo from '@weco/content/components/FacilityPromo/FacilityPromo';
-import { FeaturedCardExhibition } from '@weco/content/components/FeaturedCard';
+import FeaturedCard from '@weco/content/components/FeaturedCard';
 import InfoBox, {
   InfoIconWrapper,
 } from '@weco/content/components/InfoBox/InfoBox';
@@ -473,7 +473,8 @@ const WhatsOnPage: FunctionComponent<Props> = props => {
                     <Space $v={{ size: 'xl', properties: ['margin-bottom'] }}>
                       {firstExhibition ? (
                         <ContaineredLayout gridSizes={gridSize12()}>
-                          <FeaturedCardExhibition
+                          <FeaturedCard
+                            type="exhibition"
                             exhibition={firstExhibition}
                             background="warmNeutral.300"
                             textColor="black"