Revert changes to homepage

wellcomecollection · Dec 12, 2024 · 88bf8f5 · 88bf8f5
1 parent 75c1b70
commit 88bf8f5
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 50 deletions.
diff --git a/...app/components/HomepageCardGrid/index.tsx → ...ponents/SimpleCardGrid/SimpleCardGrid.tsx b/...app/components/HomepageCardGrid/index.tsx → ...ponents/SimpleCardGrid/SimpleCardGrid.tsx
@@ -1,19 +1,27 @@
+import { FunctionComponent } from 'react';
+
 import { getCrop } from '@weco/common/model/image';
 import { cssGrid, font } from '@weco/common/utils/classnames';
 import {
   ContaineredLayout,
   gridSize12,
 } from '@weco/common/views/components/Layout';
 import CssGridContainer from '@weco/common/views/components/styled/CssGridContainer';
+import Space from '@weco/common/views/components/styled/Space';
 import Card from '@weco/content/components/Card/Card';
 import FeaturedCard from '@weco/content/components/FeaturedCard';
-import {
-  Card as CardType,
-  convertItemToCardProps,
-  ItemType,
-} from '@weco/content/types/card';
+import { Card as CardType } from '@weco/content/types/card';
+
+type Props = {
+  items: readonly CardType[];
+  isFeaturedFirst?: boolean;
+};
+
+type CardGridFeaturedCardProps = {
+  item: CardType;
+};
 
-export const HomepageFeaturedCard = ({ item }) => {
+const CardGridFeaturedCard = ({ item }: CardGridFeaturedCardProps) => {
   const image = getCrop(item.image, '16:9');
 
   return (
@@ -59,27 +67,35 @@ export const HomepageFeaturedCard = ({ item }) => {
   );
 };
 
-type Props = {
-  items: (ItemType | CardType)[];
-};
-
-export const HomepageCardGrid = ({ items }: Props) => {
-  const threeCards = items.slice(0, 3);
+const CardGrid: FunctionComponent<Props> = ({
+  items,
+  isFeaturedFirst,
+}: Props) => {
+  const cards = items.filter(item => item.type === 'card');
+  const threeCards = isFeaturedFirst ? cards.slice(1) : cards.slice(0, 3);
+  const featuredCard = isFeaturedFirst ? cards[0] : cards[3];
 
   return (
-    <CssGridContainer>
-      <div className="css-grid">
-        {threeCards.map((item, i) => {
-          const cardItem =
-            item.type !== 'card' ? convertItemToCardProps(item) : item;
-
-          return (
+    <>
+      {featuredCard && isFeaturedFirst && (
+        <CardGridFeaturedCard item={featuredCard} />
+      )}
+      <CssGridContainer>
+        <div className="css-grid">
+          {threeCards.map((item, i) => (
             <div key={i} className={cssGrid({ s: 12, m: 4, l: 4, xl: 4 })}>
-              <Card item={cardItem} />
+              <Card item={item} />
             </div>
-          );
-        })}
-      </div>
-    </CssGridContainer>
+          ))}
+        </div>
+      </CssGridContainer>
+      {featuredCard && !isFeaturedFirst && (
+        <Space $v={{ size: 'l', properties: ['padding-top'] }}>
+          <CardGridFeaturedCard item={featuredCard} />
+        </Space>
+      )}
+    </>
   );
 };
+
+export default CardGrid;
diff --git a/content/webapp/pages/index.tsx b/content/webapp/pages/index.tsx
@@ -30,11 +30,8 @@ import SpacingSection from '@weco/common/views/components/styled/SpacingSection'
 import Standfirst from '@weco/common/views/slices/Standfirst';
 import CardGrid from '@weco/content/components/CardGrid/CardGrid';
 import ExhibitionsAndEvents from '@weco/content/components/ExhibitionsAndEvents/ExhibitionsAndEvents';
-import {
-  HomepageCardGrid,
-  HomepageFeaturedCard,
-} from '@weco/content/components/HomepageCardGrid';
 import SectionHeader from '@weco/content/components/SectionHeader/SectionHeader';
+import SimpleCardGrid from '@weco/content/components/SimpleCardGrid/SimpleCardGrid';
 import {
   filterEventsForNext7Days,
   orderEventsByNextAvailableDate,
@@ -245,7 +242,6 @@ const Homepage: FunctionComponent<Props> = ({
             )}
           </SpacingSection>
         </ContaineredLayout>
-
         {transformedHeaderList && (
           <SpacingSection>
             {transformedHeaderList.value.title && (
@@ -257,8 +253,12 @@ const Homepage: FunctionComponent<Props> = ({
               </SpacingComponent>
             )}
             <SpacingComponent>
-              <HomepageFeaturedCard
-                item={transformedHeaderList.value.items[0]}
+              <SimpleCardGrid
+                items={
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  transformedHeaderList.value.items as any[]
+                }
+                isFeaturedFirst={true}
               />
             </SpacingComponent>
           </SpacingSection>
@@ -293,7 +293,7 @@ const Homepage: FunctionComponent<Props> = ({
               />
             </SpacingComponent>
             <SpacingComponent>
-              <HomepageCardGrid
+              <SimpleCardGrid
                 items={
                   transformedContentList.value.items.map(
                     item =>

diff --git a/content/webapp/types/card.ts b/content/webapp/types/card.ts
@@ -30,24 +30,24 @@ export type Card = {
   siteSection?: SiteSection;
 };
 
-export type ItemType =
-  | ArticleBasic
-  | EventBasic
-  | Season
-  | Page
-  | Series
-  | SeriesBasic
-  | ParentPage
-  | EventSeries
-  | Book
-  | ExhibitionBasic
-  | Guide
-  | Project
-  | ExhibitionGuide
-  | ExhibitionGuideBasic
-  | VisualStoryBasic;
-
-export function convertItemToCardProps(item: ItemType): Card {
+export function convertItemToCardProps(
+  item:
+    | ArticleBasic
+    | EventBasic
+    | Season
+    | Page
+    | Series
+    | SeriesBasic
+    | ParentPage
+    | EventSeries
+    | Book
+    | ExhibitionBasic
+    | Guide
+    | Project
+    | ExhibitionGuide
+    | ExhibitionGuideBasic
+    | VisualStoryBasic
+): Card {
   const format =
     'format' in item
       ? item.format