Merge pull request #8416 from artsy/damassi/update-featured-shows-rail

chore: [Home] Update featured shows design

src/v2/Apps/Home/Components/HomeArtworkModules.tsx

@@ -1,14 +1,12 @@
 import React from "react"
-import { Join, Separator, Spacer } from "@artsy/palette"
+import { Join, Spacer } from "@artsy/palette"
 import { createFragmentContainer, graphql } from "react-relay"
 import { HomeArtworkModules_homePage } from "v2/__generated__/HomeArtworkModules_homePage.graphql"
 import {
   HomeArtworkModuleKey,
   HomeArtworkModuleRailLazyQueryRenderer,
 } from "./HomeArtworkModuleRail"
 import { MyBidsQueryRenderer } from "v2/Apps/Auctions/Components/MyBids/MyBids"
-import { HomeFeaturedShowsLazyQueryRenderer } from "./HomeFeaturedShows"
-import { compact } from "lodash"
 
 interface HomeArtworkModulesProps {
   homePage: HomeArtworkModules_homePage
@@ -17,51 +15,10 @@ interface HomeArtworkModulesProps {
 const HomeArtworkModules: React.FC<HomeArtworkModulesProps> = ({
   homePage,
 }) => {
-  if (!homePage.artworkModules || homePage.artworkModules.length === 0) {
-    // HACK: Return featured shows if there are no artwork modules
-    return <HomeFeaturedShowsLazyQueryRenderer />
-  }
-
-  // HACK: Insert featured shows before any of the gene modules (it is not an artwork module)
-  let isShowsInserted = false
-  const artworkModules = compact(
-    homePage.artworkModules.flatMap(artworkModule => {
-      if (artworkModule?.key?.includes("gene") && !isShowsInserted) {
-        isShowsInserted = true
-        return [
-          {
-            key: "featured_shows",
-            // HACK: To keep this simple just some garbage data to satisfy the types
-            title: "IGNORE",
-            params: {
-              internalID: "IGNORE",
-              relatedArtistID: "IGNORE",
-              followedArtistID: "IGNORE",
-            },
-          },
-          artworkModule,
-        ]
-      }
-
-      return artworkModule
-    })
-  )
-
   return (
     <Join separator={<Spacer mt={6} />}>
-      {artworkModules.map((artworkModule, i) => {
-        // HACK: Insert featured shows
-        if (artworkModule.key === "featured_shows") {
-          return (
-            <React.Fragment key={artworkModule.key}>
-              <HomeFeaturedShowsLazyQueryRenderer />
-
-              <Separator />
-            </React.Fragment>
-          )
-        }
-
-        if (!artworkModule.title || !artworkModule.key) {
+      {homePage.artworkModules?.map((artworkModule, i) => {
+        if (!artworkModule?.title || !artworkModule?.key) {
           return null
         }
 

src/v2/Apps/Home/Components/HomeFeaturedShow.tsx

@@ -1,4 +1,4 @@
-import { ResponsiveBox, Image, Spacer, Text } from "@artsy/palette"
+import { Image, Spacer, Text } from "@artsy/palette"
 import React from "react"
 import { createFragmentContainer, graphql } from "react-relay"
 import { RouterLink } from "v2/System/Router/RouterLink"
@@ -21,40 +21,28 @@ const HomeFeaturedShow: React.FC<HomeFeaturedShowProps> = ({ show }) => {
   const image = show.coverImage?.cropped
 
   return (
-    <RouterLink
-      to={show.href ?? ""}
-      style={{ display: "block", textDecoration: "none" }}
-    >
-      <ResponsiveBox
-        aspectWidth={4}
-        aspectHeight={3}
-        maxWidth="100%"
-        bg="black10"
-      >
-        {image && (
-          <Image
-            src={image.src}
-            srcSet={image.srcSet}
-            width="100%"
-            height="100%"
-            alt=""
-          />
-        )}
-      </ResponsiveBox>
+    <RouterLink to={show.href ?? ""} display="block" textDecoration="none">
+      {image && (
+        <Image
+          src={image.src}
+          srcSet={image.srcSet}
+          width={image.width}
+          height={image.height}
+          alt=""
+        />
+      )}
 
       <Spacer mt={2} />
 
-      <Text variant="xl" mr={1} lineClamp={2}>
+      <Text variant="lg" mr={1} lineClamp={2}>
         {show.name}
       </Text>
 
-      <Text variant="xl" color="black60" lineClamp={1}>
+      <Text variant="sm" color="black60" lineClamp={1}>
         {show.partner?.name}
       </Text>
 
-      <Spacer mt={1} />
-
-      <Text variant="sm">
+      <Text variant="sm" color="black60">
         {[show.formattedStartAt, show.formattedEndAt].filter(Boolean).join("–")}
         {formattedTime && (
           <>
@@ -87,9 +75,11 @@ export const HomeFeaturedShowFragmentContainer = createFragmentContainer(
           }
         }
         coverImage {
-          cropped(width: 600, height: 450) {
+          cropped(width: 325, height: 230) {
             src
             srcSet
+            width
+            height
           }
         }
       }

src/v2/Apps/Home/Components/HomeFeaturedShows.tsx → src/v2/Apps/Home/Components/HomeFeaturedShowsRail.tsx

@@ -1,13 +1,13 @@
 import {
-  GridColumns,
-  Column,
   ResponsiveBox,
   Text,
   Spacer,
   Flex,
   Skeleton,
   SkeletonBox,
   SkeletonText,
+  Shelf,
+  Sup,
 } from "@artsy/palette"
 import { compact, take } from "lodash"
 import React from "react"
@@ -16,17 +16,17 @@ import { useSystemContext } from "v2/System"
 import { SystemQueryRenderer } from "v2/System/Relay/SystemQueryRenderer"
 import { RouterLink } from "v2/System/Router/RouterLink"
 import { useLazyLoadComponent } from "v2/Utils/Hooks/useLazyLoadComponent"
-import { HomeFeaturedShowsQuery } from "v2/__generated__/HomeFeaturedShowsQuery.graphql"
-import { HomeFeaturedShows_orderedSet } from "v2/__generated__/HomeFeaturedShows_orderedSet.graphql"
+import { HomeFeaturedShowsRailQuery } from "v2/__generated__/HomeFeaturedShowsRailQuery.graphql"
+import { HomeFeaturedShowsRail_orderedSet } from "v2/__generated__/HomeFeaturedShowsRail_orderedSet.graphql"
 import { HomeFeaturedShowFragmentContainer } from "./HomeFeaturedShow"
 
 const SHOWS_LIMIT = 6
 
-interface HomeFeaturedShowsProps {
-  orderedSet: HomeFeaturedShows_orderedSet
+interface HomeFeaturedShowsRailProps {
+  orderedSet: HomeFeaturedShowsRail_orderedSet
 }
 
-const HomeFeaturedShows: React.FC<HomeFeaturedShowsProps> = ({
+const HomeFeaturedShowsRail: React.FC<HomeFeaturedShowsRailProps> = ({
   orderedSet,
 }) => {
   const shows = take(
@@ -39,25 +39,31 @@ const HomeFeaturedShows: React.FC<HomeFeaturedShowsProps> = ({
   if (shows.length === 0) return null
 
   return (
-    <HomeFeaturedShowsContainer>
-      <GridColumns gridRowGap={6}>
-        {shows.map(show => {
+    <HomeFeaturedShowsRailContainer showsCount={shows.length}>
+      <Shelf alignItems="flex-start">
+        {shows.map((show, index) => {
           return (
-            <Column key={show.internalID} span={4}>
+            <React.Fragment key={index}>
               <HomeFeaturedShowFragmentContainer show={show} />
-            </Column>
+            </React.Fragment>
           )
         })}
-      </GridColumns>
-    </HomeFeaturedShowsContainer>
+      </Shelf>
+    </HomeFeaturedShowsRailContainer>
   )
 }
 
-const HomeFeaturedShowsContainer: React.FC = ({ children }) => {
+const HomeFeaturedShowsRailContainer: React.FC<{ showsCount: number }> = ({
+  children,
+  showsCount,
+}) => {
   return (
     <>
       <Flex justifyContent="space-between" alignItems="center">
-        <Text variant="xl">Featured shows</Text>
+        <Text variant="lg">
+          Featured shows{" "}
+          {showsCount > 1 && <Sup color="brand">{showsCount}</Sup>}
+        </Text>
 
         <Text
           variant="sm"
@@ -76,11 +82,11 @@ const HomeFeaturedShowsContainer: React.FC = ({ children }) => {
   )
 }
 
-export const HomeFeaturedShowsFragmentContainer = createFragmentContainer(
-  HomeFeaturedShows,
+export const HomeFeaturedShowsRailFragmentContainer = createFragmentContainer(
+  HomeFeaturedShowsRail,
   {
     orderedSet: graphql`
-      fragment HomeFeaturedShows_orderedSet on OrderedSet {
+      fragment HomeFeaturedShowsRail_orderedSet on OrderedSet {
         items {
           __typename
           ... on Show {
@@ -94,45 +100,43 @@ export const HomeFeaturedShowsFragmentContainer = createFragmentContainer(
 )
 
 const PLACEHOLDER = (
-  <HomeFeaturedShowsContainer>
+  <HomeFeaturedShowsRailContainer showsCount={0}>
     <Skeleton>
-      <GridColumns gridRowGap={6}>
+      <Shelf>
         {[...new Array(6)].map((_, i) => {
           return (
-            <Column key={i} span={4}>
+            <React.Fragment key={i}>
               <ResponsiveBox aspectWidth={4} aspectHeight={3} maxWidth="100%">
                 <SkeletonBox width="100%" height="100%" />
               </ResponsiveBox>
 
               <Spacer mt={2} />
 
-              <SkeletonText variant="xl" mr={1}>
+              <SkeletonText variant="lg" mr={1}>
                 Show Title Typically Two Lines
               </SkeletonText>
 
-              <SkeletonText variant="xl">Partner name</SkeletonText>
-
-              <Spacer mt={1} />
+              <SkeletonText variant="sm">Partner name</SkeletonText>
 
               <SkeletonText variant="sm">Jan 1–31</SkeletonText>
-            </Column>
+            </React.Fragment>
           )
         })}
-      </GridColumns>
+      </Shelf>
     </Skeleton>
-  </HomeFeaturedShowsContainer>
+  </HomeFeaturedShowsRailContainer>
 )
 
-export const HomeFeaturedShowsQueryRenderer: React.FC = () => {
+export const HomeFeaturedShowsRailQueryRenderer: React.FC = () => {
   const { relayEnvironment } = useSystemContext()
 
   return (
-    <SystemQueryRenderer<HomeFeaturedShowsQuery>
+    <SystemQueryRenderer<HomeFeaturedShowsRailQuery>
       environment={relayEnvironment}
       query={graphql`
-        query HomeFeaturedShowsQuery {
+        query HomeFeaturedShowsRailQuery {
           orderedSet(id: "530ebe92139b21efd6000071") {
-            ...HomeFeaturedShows_orderedSet
+            ...HomeFeaturedShowsRail_orderedSet
           }
         }
       `}
@@ -149,7 +153,9 @@ export const HomeFeaturedShowsQueryRenderer: React.FC = () => {
 
         if (props.orderedSet) {
           return (
-            <HomeFeaturedShowsFragmentContainer orderedSet={props.orderedSet} />
+            <HomeFeaturedShowsRailFragmentContainer
+              orderedSet={props.orderedSet}
+            />
           )
         }
 
@@ -159,14 +165,14 @@ export const HomeFeaturedShowsQueryRenderer: React.FC = () => {
   )
 }
 
-export const HomeFeaturedShowsLazyQueryRenderer: React.FC = () => {
+export const HomeFeaturedShowsRailLazyQueryRenderer: React.FC = () => {
   const { Waypoint, isEnteredView } = useLazyLoadComponent()
 
   return (
     <>
       <Waypoint />
 
-      {isEnteredView ? <HomeFeaturedShowsQueryRenderer /> : PLACEHOLDER}
+      {isEnteredView ? <HomeFeaturedShowsRailQueryRenderer /> : PLACEHOLDER}
     </>
   )
 }

src/v2/Apps/Home/HomeApp.tsx

@@ -10,6 +10,7 @@ import { HomeFeaturedEventsRailFragmentContainer } from "./Components/HomeFeatur
 import { HomeMeta } from "./Components/HomeMeta"
 import { FlashBannerQueryRenderer } from "v2/Components/FlashBanner"
 import { HomeFeaturedGalleriesRailQueryRenderer } from "./Components/HomeFeaturedGalleriesRail"
+import { HomeFeaturedShowsRailQueryRenderer } from "./Components/HomeFeaturedShowsRail"
 
 interface HomeAppProps {
   homePage: HomeApp_homePage | null
@@ -52,6 +53,8 @@ export const HomeApp: React.FC<HomeAppProps> = ({
         <HomeFeaturedMarketNewsLazyQueryRenderer />
 
         <HomeFeaturedGalleriesRailQueryRenderer />
+
+        <HomeFeaturedShowsRailQueryRenderer />
       </Join>
     </>
   )

src/v2/Apps/Home/__tests__/HomeFeaturedShows.jest.tsx → src/v2/Apps/Home/__tests__/HomeFeaturedShowsRail.jest.tsx

@@ -1,22 +1,22 @@
 import { graphql } from "relay-runtime"
 import { setupTestWrapper } from "v2/DevTools/setupTestWrapper"
-import { HomeFeaturedShowsFragmentContainer } from "../Components/HomeFeaturedShows"
-import { HomeFeaturedShows_Test_Query } from "v2/__generated__/HomeFeaturedShows_Test_Query.graphql"
+import { HomeFeaturedShowsRailFragmentContainer } from "../Components/HomeFeaturedShowsRail"
+import { HomeFeaturedShowsRail_Test_Query } from "v2/__generated__/HomeFeaturedShowsRail_Test_Query.graphql"
 
 jest.unmock("react-relay")
 
-const { getWrapper } = setupTestWrapper<HomeFeaturedShows_Test_Query>({
-  Component: HomeFeaturedShowsFragmentContainer,
+const { getWrapper } = setupTestWrapper<HomeFeaturedShowsRail_Test_Query>({
+  Component: HomeFeaturedShowsRailFragmentContainer,
   query: graphql`
-    query HomeFeaturedShows_Test_Query {
+    query HomeFeaturedShowsRail_Test_Query {
       orderedSet(id: "example") {
-        ...HomeFeaturedShows_orderedSet
+        ...HomeFeaturedShowsRail_orderedSet
       }
     }
   `,
 })
 
-describe("HomeFeaturedShows", () => {
+describe("HomeFeaturedShowsRail", () => {
   it("renders correctly", () => {
     const wrapper = getWrapper({
       Show: () => ({