🚧 move 'useCarousel' to main promotion component (#1373)

equinor · Dec 14, 2022 · 7b3f50e · 7b3f50e
1 parent 3b5afab
commit 7b3f50e
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 51 deletions.
diff --git a/studio/schemas/objects/promotion/promoteMagazine.tsx b/studio/schemas/objects/promotion/promoteMagazine.tsx
@@ -70,15 +70,6 @@ export default {
       options: { sortable: false },
       hidden: ({ parent }: { parent: MagazinePromotion }) => parent?.manuallySelectArticles === true,
     },
-    {
-      name: 'useCarousel',
-      title: 'Use carousel',
-      description: 'Display the cards in a horizontal carousel',
-      type: 'boolean',
-      initialValue: false,
-      readOnly: !Flags.IS_DEV,
-      hidden: !Flags.IS_DEV,
-    },
   ],
   preview: {
     select: {

diff --git a/studio/schemas/objects/promotion/promoteNews.tsx b/studio/schemas/objects/promotion/promoteNews.tsx
@@ -64,15 +64,6 @@ export default {
       validation: (Rule: Rule) => Rule.unique(),
       options: { sortable: false },
     },
-    {
-      name: 'useCarousel',
-      title: 'Use carousel',
-      description: 'Display the cards in a horizontal carousel',
-      type: 'boolean',
-      initialValue: false,
-      readOnly: !Flags.IS_DEV,
-      hidden: !Flags.IS_DEV,
-    },
   ].filter((e) => e),
   preview: {
     select: {

diff --git a/studio/schemas/objects/promotion/promoteTopic.tsx b/studio/schemas/objects/promotion/promoteTopic.tsx
@@ -87,15 +87,6 @@ export default {
       ],
       validation: (Rule: Rule) => Rule.unique().min(3).max(3),
     },
-    {
-      name: 'useCarousel',
-      title: 'Use carousel',
-      description: 'Display the cards in a horizontal carousel',
-      type: 'boolean',
-      initialValue: false,
-      readOnly: !Flags.IS_DEV,
-      hidden: !Flags.IS_DEV,
-    },
   ],
   preview: {
     select: {

diff --git a/studio/schemas/objects/promotion/promotion.tsx b/studio/schemas/objects/promotion/promotion.tsx
@@ -78,6 +78,16 @@ export default {
       options: { sortable: false },
       validation: (Rule: Rule) => Rule.required().min(1).max(1),
     },
+    {
+      name: 'useCarousel',
+      title: 'Use carousel',
+      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',
+      type: 'boolean',
+      initialValue: false,
+      readOnly: !Flags.IS_DEV,
+      hidden: !Flags.IS_DEV,
+    },
     {
       title: 'Background',
       description: 'Pick a colour for the background. Default is white.',

diff --git a/web/lib/queries/common/pageContentFields.ts b/web/lib/queries/common/pageContentFields.ts
@@ -200,10 +200,10 @@ const pageContentFields = /* groq */ `
       ...,
       ${markDefs},
     },
+    "useCarousel": useCarousel,
     "content": promotion[0]{
       "id": _key,
       "type": _type,
-      "useCarousel": useCarousel,
       _type == "promoteNews" => {
         "tags": tags[]->{
           "id": _id,

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, designOptions } = data
+  const { title, ingress, content, useCarousel, 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={content?.useCarousel}
+            useCarousel={useCarousel}
           />
         )}
       </Wrapper>

diff --git a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
@@ -108,6 +108,19 @@ const MultiplePromotions = ({
     )
   }
 
+  if (Flags.IS_DEV && useCarousel) {
+    return (
+      <Carousel type="card">
+        {data.map((item) => {
+          const card = getCard(item)
+          if (card) {
+            return <CarouselItem key={item.id}>{card}</CarouselItem>
+          }
+        })}
+      </Carousel>
+    )
+  }
+
   if (variant === 'promotePeople') {
     return (
       <PeopleCardsWrapper>
@@ -121,26 +134,13 @@ const MultiplePromotions = ({
   }
 
   return (
-    <>
-      {Flags.IS_DEV && useCarousel ? (
-        <Carousel type="card">
-          {data.map((item) => {
-            const card = getCard(item)
-            if (card) {
-              return <CarouselItem key={item.id}>{card}</CarouselItem>
-            }
-          })}
-        </Carousel>
-      ) : (
-        <CardsWrapper>
-          <>
-            {data.map((item) => {
-              return getCard(item)
-            })}
-          </>
-        </CardsWrapper>
-      )}
-    </>
+    <CardsWrapper>
+      <>
+        {data.map((item) => {
+          return getCard(item)
+        })}
+      </>
+    </CardsWrapper>
   )
 }
 

diff --git a/web/types/types.ts b/web/types/types.ts
@@ -488,8 +488,8 @@ export type PromotionData = {
     promotions: CardData[] | PeopleCardData[] | EventCardData[]
     type: PromotionType
     eventPromotionSettings?: EventPromotionSettings
-    useCarousel?: boolean | undefined
   }
+  useCarousel?: boolean | undefined
   designOptions?: DesignOptions
 }