New Tab Page Sponsored Image Clickbox (#17356)

Author: fallaciousreasoning

components/brave_new_tab_ui/components/default/page/index.tsx

@@ -71,7 +71,7 @@ const StyledPage = styled('div')<PageProps>`
   width: 100%;
   display: grid;
   grid-template-rows: repeat(calc(var(--ntp-page-rows) - 1), min-content) auto;
-  grid-template-columns: min-content auto min-content;
+  grid-template-columns: min-content 1fr min-content;
   grid-auto-flow: row dense;
   padding: var(--ntp-page-padding);
   overflow: hidden;
@@ -185,10 +185,29 @@ export const GridItemWidgetStack = styled('section')`
 `
 
 export const GridItemTopSites = styled('section')`
-  grid-column: 1 / span 2;
+  grid-column: 1;
   ${singleColumnSmallViewport}
 `
 
+export const GridItemSponsoredImageClickArea = styled.section<{ otherWidgetsHidden: boolean }>`
+  grid-column: 2;
+  grid-row: 2 / span 3;
+  height: calc(100% - 200px);
+  width: 100%;
+  position: relative;
+
+  @media screen and (max-width: ${breakpointEveryBlock}) {
+    ${(p) =>
+      p.otherWidgetsHidden
+        ? css`
+            flex-grow: 2;
+          `
+        : css`
+            display: none
+          `}
+  }
+`
+
 export const GridItemNotification = styled('section')`
   position: fixed;
   left: 50%;

components/brave_new_tab_ui/components/default/sponsoredImage/sponsoredImageClickArea.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) 2023 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import { OpenNewIcon } from 'brave-ui/components/icons'
+import * as React from 'react'
+import styled from 'styled-components'
+
+const Indicator = styled.span`
+  display: none;
+
+  position: absolute;
+  top: 8px;
+  right: 8px;
+
+  width: 20px;
+  height: 20px;
+  color: white;
+`
+
+const Link = styled.a`
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  right: 56px;
+  bottom: 8px;
+  display: block;
+
+  &:hover {
+    cursor: pointer;
+    ${Indicator} {
+      display: block;
+    }
+  }
+`
+
+export default function SponsoredImageClickArea(props: { sponsoredImageUrl: string, onClick: () => void }) {
+  return (
+    <Link href={props.sponsoredImageUrl} rel="noreferrer noopener" onClick={props.onClick}>
+      <Indicator>
+        <OpenNewIcon />
+      </Indicator>
+    </Link>
+  )
+}

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -37,6 +37,7 @@ import Settings, { TabType as SettingsTabType } from './settings'
 import { BraveNewsContextProvider } from '../../components/default/braveNews/customize/Context'
 import BraveNewsHint from '../../components/default/braveNews/hint'
 import GridWidget from './gridWidget'
+import SponsoredImageClickArea from '../../components/default/sponsoredImage/sponsoredImageClickArea'
 
 interface Props {
   newTabData: NewTab.State
@@ -640,6 +641,10 @@ class NewTabPage extends React.Component<Props, State> {
                 />
               </Page.GridItemTopSites>
             }
+            {newTabData.brandedWallpaper?.isSponsored && <Page.GridItemSponsoredImageClickArea otherWidgetsHidden={this.allWidgetsHidden()}>
+              <SponsoredImageClickArea onClick={this.onClickLogo}
+                sponsoredImageUrl={newTabData.brandedWallpaper.logo.destinationUrl}/>
+              </Page.GridItemSponsoredImageClickArea>}
             {
               gridSitesData.shouldShowSiteRemovedNotification
                 ? (