🚧 rename "useCarousel" => "useHorizontalScroll"; enable by default on…

… mobile (#1373)
equinor · Dec 20, 2022 · ae45c36 · ae45c36
1 parent 9c3ea76
commit ae45c36
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -489,7 +489,7 @@ export type PromotionData = {
     type: PromotionType
     eventPromotionSettings?: EventPromotionSettings
   }
-  useCarousel?: boolean | undefined
+  useHorizontalScroll?: boolean | undefined
   designOptions?: DesignOptions
 }