feat: add News home view section (#10663)

feat: add News home section

src/app/Scenes/HomeView/HomeView.tsx

@@ -78,6 +78,7 @@ const sectionsFragment = graphql`
             ... on ArticlesRailHomeViewSection {
               internalID
               ...ArticlesRailHomeViewSection_section
+              ...ArticlesCardsHomeViewSection_section
             }
             ... on ArtworksRailHomeViewSection {
               internalID

src/app/Scenes/HomeView/Sections/ArticlesCardsHomeViewSection.tests.tsx

@@ -0,0 +1,62 @@
+import { screen } from "@testing-library/react-native"
+import { ArticlesCardsHomeViewSectionTestsQuery } from "__generated__/ArticlesCardsHomeViewSectionTestsQuery.graphql"
+import { ArticlesCardsHomeViewSection } from "app/Scenes/HomeView/Sections/ArticlesCardsHomeViewSection"
+import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
+import { graphql } from "react-relay"
+
+describe("ArticlesCardsHomeViewSection", () => {
+  const { renderWithRelay } = setupTestWrapper<ArticlesCardsHomeViewSectionTestsQuery>({
+    Component: (props) => {
+      if (!props.homeView.section) {
+        return null
+      }
+      return <ArticlesCardsHomeViewSection section={props.homeView.section} />
+    },
+    query: graphql`
+      query ArticlesCardsHomeViewSectionTestsQuery @relay_test_operation {
+        homeView {
+          section(id: "home-view-section-latest-activity") {
+            ... on ArticlesRailHomeViewSection {
+              ...ArticlesCardsHomeViewSection_section
+            }
+          }
+        }
+      }
+    `,
+  })
+
+  it("renders a list of articles", () => {
+    renderWithRelay({
+      HomeViewComponent: () => ({
+        title: "Some news items",
+      }),
+      ArticleConnection: () => ({
+        edges: [
+          {
+            node: {
+              title: "The first news item",
+              href: "/article/one",
+            },
+          },
+          {
+            node: {
+              title: "The second news item",
+              href: "/article/two",
+            },
+          },
+          {
+            node: {
+              title: "The third news item",
+              href: "/article/three",
+            },
+          },
+        ],
+      }),
+    })
+
+    expect(screen.getByText(/Some news items/)).toBeOnTheScreen()
+    expect(screen.getByText(/The first news item/)).toBeOnTheScreen()
+    expect(screen.getByText(/The second news item/)).toBeOnTheScreen()
+    expect(screen.getByText(/The third news item/)).toBeOnTheScreen()
+  })
+})

src/app/Scenes/HomeView/Sections/ArticlesCardsHomeViewSection.tsx

@@ -0,0 +1,78 @@
+import { Flex, Separator, Text, Touchable, useSpace } from "@artsy/palette-mobile"
+import { ArticlesCardsHomeViewSection_section$key } from "__generated__/ArticlesCardsHomeViewSection_section.graphql"
+import { navigate } from "app/system/navigation/navigate"
+import { extractNodes } from "app/utils/extractNodes"
+import { graphql, useFragment } from "react-relay"
+
+interface ArticlesCardsHomeViewSectionProps {
+  section: ArticlesCardsHomeViewSection_section$key
+}
+
+export const ArticlesCardsHomeViewSection: React.FC<ArticlesCardsHomeViewSectionProps> = (
+  props
+) => {
+  const { section } = props
+  const data = useFragment(fragment, section)
+  const articles = extractNodes(data.cardArticlesConnection)
+  const title = data.component?.title ?? "News"
+  const viewAllHref = data.component?.href ?? "/news" // TODO: update to use new behaviors
+
+  const space = useSpace()
+
+  const handleOnPress = (href: string) => {
+    navigate(href)
+  }
+
+  return (
+    <Flex m={2} p={2} border="1px solid" borderColor="black30" gap={space(2)}>
+      <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
+        <Text variant="lg-display">{title}</Text>
+        <Text variant="lg-display">{date()}</Text>
+      </Flex>
+      {articles.map((article, index) => (
+        <Flex key={index} gap={space(2)}>
+          <Touchable onPress={() => handleOnPress(article.href ?? "")}>
+            <Flex flexDirection="row" alignItems="center">
+              <Text variant="sm-display" numberOfLines={3}>
+                {article.title}
+              </Text>
+            </Flex>
+          </Touchable>
+          {index !== articles.length - 1 && <Separator />}
+        </Flex>
+      ))}
+      <Touchable onPress={() => navigate(viewAllHref)}>
+        <Flex flexDirection="row" justifyContent="flex-end">
+          <Text variant="sm-display">
+            {/* TODO: get this text from new behavior */}
+            More in News
+          </Text>
+        </Flex>
+      </Touchable>
+    </Flex>
+  )
+}
+
+const date = () =>
+  new Date().toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+  })
+
+const fragment = graphql`
+  fragment ArticlesCardsHomeViewSection_section on ArticlesRailHomeViewSection {
+    component {
+      title
+      href
+    }
+
+    cardArticlesConnection: articlesConnection(first: 3) {
+      edges {
+        node {
+          title
+          href
+        }
+      }
+    }
+  }
+`

src/app/Scenes/HomeView/Sections/Section.tsx

@@ -1,6 +1,7 @@
 import { Flex, Text } from "@artsy/palette-mobile"
 import { HomeViewSectionsConnection_viewer$data } from "__generated__/HomeViewSectionsConnection_viewer.graphql"
 import { ActivityRailHomeViewSection } from "app/Scenes/HomeView/Sections/ActivityRailHomeViewSection"
+import { ArticlesCardsHomeViewSection } from "app/Scenes/HomeView/Sections/ArticlesCardsHomeViewSection"
 import { ArticlesRailHomeViewSection } from "app/Scenes/HomeView/Sections/ArticlesRailHomeViewSection"
 import { ArtistsRailHomeViewSectionPaginationContainer } from "app/Scenes/HomeView/Sections/ArtistsRailHomeViewSection"
 import { ArtworksRailHomeViewSection } from "app/Scenes/HomeView/Sections/ArtworksRailHomeViewSection"
@@ -25,6 +26,8 @@ export const Section: React.FC<{ section: SectionT }> = (props) => {
   switch (section.component?.type) {
     case "FeaturedCollection":
       return <FeaturedCollectionHomeViewSection section={section} />
+    case "ArticlesCard":
+      return <ArticlesCardsHomeViewSection section={section} />
   }
 
   switch (section.__typename) {