From ae45c3662ca0bc45bd877846c154c6a7497ae30c Mon Sep 17 00:00:00 2001
From: Sven van Steenis <SvSven@users.noreply.github.com>
Date: Tue, 20 Dec 2022 10:55:33 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20rename=20"useCarousel"=20=3D>=20?=
 =?UTF-8?q?"useHorizontalScroll";=20enable=20by=20default=20on=20mobile=20?=
 =?UTF-8?q?(#1373)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 studio/schemas/objects/promotion/promotion.tsx         |  6 +++---
 web/lib/queries/common/pageContentFields.ts            |  2 +-
 web/pageComponents/topicPages/Promotion.tsx            |  4 ++--
 .../topicPages/promotions/MultiplePromotions.tsx       | 10 +++++++---
 web/types/types.ts                                     |  2 +-
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/studio/schemas/objects/promotion/promotion.tsx b/studio/schemas/objects/promotion/promotion.tsx
index 6c7db4056..113b1255c 100644
--- a/studio/schemas/objects/promotion/promotion.tsx
+++ b/studio/schemas/objects/promotion/promotion.tsx
@@ -79,10 +79,10 @@ export default {
       validation: (Rule: Rule) => Rule.required().min(1).max(1),
     },
     {
-      name: 'useCarousel',
-      title: 'Use carousel',
+      name: 'useHorizontalScroll',
+      title: 'Use horizontal scroll',
       description:
-        'When this is enabled, the promotion will automatically be displayed in a horizontal carousel if the amount of content is more than the screen size allows',
+        'When this is enabled, the promotion will use horizontal scroll if the amount of content is greater than the screen size allows. This feature is enabled by default for smaller screen sizes.',
       type: 'boolean',
       initialValue: false,
       readOnly: !Flags.IS_DEV,
diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
index f9b9878ac..1f47e142b 100644
--- a/web/lib/queries/common/pageContentFields.ts
+++ b/web/lib/queries/common/pageContentFields.ts
@@ -200,7 +200,7 @@ const pageContentFields = /* groq */ `
       ...,
       ${markDefs},
     },
-    "useCarousel": useCarousel,
+    "useHorizontalScroll": useHorizontalScroll,
     "content": promotion[0]{
       "id": _key,
       "type": _type,
diff --git a/web/pageComponents/topicPages/Promotion.tsx b/web/pageComponents/topicPages/Promotion.tsx
index d2d83d29d..25ef35837 100644
--- a/web/pageComponents/topicPages/Promotion.tsx
+++ b/web/pageComponents/topicPages/Promotion.tsx
@@ -27,7 +27,7 @@ const StyledHeading = styled(TitleText)`
 `
 
 const Promotion = ({ data, anchor, ...rest }: { data: PromotionData; anchor?: string }) => {
-  const { title, ingress, content, useCarousel, designOptions } = data
+  const { title, ingress, content, useHorizontalScroll, designOptions } = data
   // const { articles = [], pages = [] } = data.promotion
   const promotions = content?.promotions || []
   const variant = data.content?.type
@@ -52,7 +52,7 @@ const Promotion = ({ data, anchor, ...rest }: { data: PromotionData; anchor?: st
             variant={variant}
             hasSectionTitle={!!title}
             eventPromotionSettings={content?.eventPromotionSettings}
-            useCarousel={useCarousel}
+            useHorizontalScroll={useHorizontalScroll}
           />
         )}
       </Wrapper>
diff --git a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
index 0e5fcf515..0fa0e0c29 100644
--- a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
+++ b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
@@ -12,6 +12,7 @@ import PeopleCard from '../../cards/PeopleCard/PeopleCard'
 import MultipleEventCards from './MultipleEventCards'
 import { HorizontalScroll, HorizontalScrollItem } from '../../shared/Carousel'
 import { Flags } from '../../../common/helpers/datasetHelpers'
+import useWindowSize from '../../../lib/hooks/useWindowSize'
 
 const CardsWrapper = styled.div`
   width: 100%;
@@ -75,13 +76,13 @@ const MultiplePromotions = ({
   variant,
   hasSectionTitle,
   eventPromotionSettings,
-  useCarousel = false,
+  useHorizontalScroll = false,
 }: {
   data: CardData[] | PeopleCardData[] | EventCardData[]
   variant: PromotionType
   hasSectionTitle: boolean
   eventPromotionSettings?: EventPromotionSettings
-  useCarousel?: boolean | undefined
+  useHorizontalScroll?: boolean | undefined
 }) => {
   const getCard = (data: CardProps) => {
     switch (data.type) {
@@ -98,6 +99,9 @@ const MultiplePromotions = ({
     }
   }
 
+  const { width } = useWindowSize()
+  const renderScroll = useHorizontalScroll || (width && width <= 800)
+
   if (variant === 'promoteEvents') {
     return (
       <MultipleEventCards
@@ -108,7 +112,7 @@ const MultiplePromotions = ({
     )
   }
 
-  if (Flags.IS_DEV && useCarousel) {
+  if (Flags.IS_DEV && renderScroll) {
     return (
       <HorizontalScroll type="card">
         {data.map((item) => {
diff --git a/web/types/types.ts b/web/types/types.ts
index bc5ae96ae..377d91d44 100644
--- a/web/types/types.ts
+++ b/web/types/types.ts
@@ -489,7 +489,7 @@ export type PromotionData = {
     type: PromotionType
     eventPromotionSettings?: EventPromotionSettings
   }
-  useCarousel?: boolean | undefined
+  useHorizontalScroll?: boolean | undefined
   designOptions?: DesignOptions
 }